Relación de aspecto - Trucos CSS

La propiedad CSS le aspect-ratiopermite crear cuadros que mantienen dimensiones proporcionales donde los heighty widthde un cuadro se calculan automáticamente como una proporción. Es un poco matemático, pero la idea es que puede dividir un valor por otro en esta propiedad y el valor calculado asegura que una caja permanezca en esa proporción.

.element ( aspect-ratio: 2 / 1; /* ↔️ is double the ↕️ */ ) .element ( aspect-ratio: 1 / 1; /* ⏹ a perfect square */ )

aspect-ratiose define en la especificación CSS Box Sizing Module Level 4, que se encuentra actualmente en borrador de trabajo. Eso significa que todavía está en progreso y tiene posibilidades de cambiar. Pero con Chrome y Firefox apoyándolo detrás de una bandera experimental, y Safari Technology Preview agregando soporte para él a principios de 2021, hay fuertes señales de que aspect-ratioestá ganando mucho impulso.

Sintaxis

aspect-ratio: auto || ;

En inglés simple: aspect-ratiose asume que es autopor defecto o acepta a como un valor donde .

• Valor inicial: auto
• Se aplica a: todos los elementos excepto cuadros en línea y cuadros internos de rubí o de tabla
• Heredado: no
• Porcentajes: n / a
• Valor calculado: palabra clave especificada o un par de números
• Tipo de animación: discreto

Valores

/* Keyword values */ aspect-ratio: auto; /* default */ /* Ratio values */ aspect-ratio: 1 / 1; /* width and height are equal proportion */ aspect-ratio: 2 / 1; /* width is twice the height*/ aspect-ratio: 1 / 2; /* width is half the height */ aspect-ratio: 16 / 9 /* typical video aspect ratio */ /* Global values */ aspect-ratio: inherit; aspect-ratio: initial; aspect-ratio: unset;

Funciona en contenido reemplazado y no reemplazado

Si estás pensando, "Uhm, sí, ¿el navegador ya no hace esto por nosotros con las imágenes?" la respuesta es: absolutamente . Los navegadores realizan algunos cálculos de relación de aspecto sofisticados en contenido reemplazado, como imágenes. Entonces, si una imagen tiene, digamos, un ancho de 500px, el navegador flexiona sus algoritmos de diseño CSS para mantener las dimensiones intrínsecas o "naturales" de la imagen. La aspect-ratiopropiedad se puede utilizar para anular eficazmente esas dimensiones naturales.

Pero el contenido no reemplazado no tiene una proporción natural. Eso es la mayoría de las cosas con las que trabajamos, como divs. En lugar de intentar mantener las proporciones naturales del elemento, aspect-ratioestablece un tamaño "preferido".

Ahora, la especificación actualmente señala que las especificaciones CSS más antiguas, especialmente CSS 2.1, no contienen una distinción clara entre contenido reemplazado y no reemplazado. Eso significa que podríamos ver algunos casos especiales adicionales agregados a la especificación para ayudar a aclararlos. Por el momento, estamos viendo que los navegadores implementan soporte para establecer relaciones de aspecto preferidas en reemplazados y no reemplazados por separado, donde algunos de los navegadores con soporte temprano detrás de una marca experimental solo pueden admitir aspect-ratiocontenido no reemplazado. Definitivamente vale la pena estar atento al soporte del navegador a medida que evoluciona.

Funciona por sí solo sin especificar un widthoheight

Entonces, sí, simplemente podemos colocarlo en un elemento como este:

.element ( aspect-ratio: 16 / 9; )

… Y el valor predeterminado del elemento se width: autoactiva implícitamente para establecer las dimensiones del elemento.

Cambia cuando widtho heightestán en el mismo elemento.

Digamos que tenemos un elemento con un ancho de 300pxy un aspect-ratiode 3/1.

.element ( aspect-ratio: 3 / 1; width: 300px; )

Por naturaleza, aspect-ratioquiere calcular las dimensiones del elemento por sí solo y lo hará en función del contexto en el que se utilice. Pero con eso widthincluido, le dice a la relación de aspecto que calcule el cuadro de relación de aspecto del elemento usando 300pxcomo ancho. Como resultado, es como si acabáramos de escribir:

.element ( height: 100px; width: 300px; )

¡Esto tiene sentido! Recuerde, cuando no se especifican widtho height, el navegador asume que son autoy va desde allí. Cuando proporcionamos valores widthy explícitos height, esos son los que se utilizan.

Se ignora en algunas situaciones.

Aquí es donde las cosas se vuelven un poco complicadas porque hay casos en los que aspect-ratiose pasa por alto o sus cálculos se ven afectados por otras propiedades. Eso incluye:

Cuando ambos widthy heightse declaran en el elemento

Acabamos de ver cómo la declaración de widtho heighten un elemento afectará el cálculo de aspect-ratio. Pero si el elemento ya tiene un widthy height, esos se usan en lugar de aspect-ratio. Requiere que se anulen ambas propiedades aspect-ratio; establecer uno heighto widthsolo no romperá la relación de aspecto del elemento.

Hace senes, ¿verdad? Si el uso de widtho heightobliga aspect-ratioa usar ese valor en el cálculo, entonces lógicamente se deduce que el uso de ambos se anularía por aspect-ratiocompleto, ya que ambos valores ya se proporcionan y se establecen.

Cuando el contenido se sale de la proporción

En pocas palabras, si tiene un elemento con una relación de aspecto y el contenido es tan largo que obliga al elemento a expandirse, entonces el elemento se expandirá. Y si el elemento se expande, sus dimensiones cambian y, por lo tanto, no más relación de aspecto. Es por eso que la especificación dice que la propiedad establece la relación de aspecto "preferida". Se prefiere, pero no se prescribe.

¿No te gusta cómo funciona? La configuración min-height: 0;del elemento permitirá que el contenido desborde la relación de aspecto preferida en lugar de expandirla.

Cuando "pierde" min-*y max-*propiedades

Simplemente vimos cómo funciona eso, ¿verdad? Cuando el contenido excede las dimensiones de la caja, aspect-ratioefectivamente desaparece porque la caja se expande con el contenido. Podemos anular eso con min-width: 0.

Esto se debe a todos los min-*y max-*las propiedades normalmente batalla widthy heightpor la supremacía en la guerra por los cálculos de modelo de caja. Por ejemplo:

.element ( min-width: 500px; /* ? Winner! */ width: 100px; )

Pero:

.element ( min-width: 500px; width: 700px; /* ? Winner! */ )

Eso es porque min-widthestá impidiendo widthir por debajo de un valor específico, o se ignora porque el widthconjunto ya estableció el elemento más allá del ancho mínimo que debe tener. Lo mismo ocurre con min-height, max-widthy max-height.

El punto de todo esto: si establecemos una propiedad min-*o max-*en el mismo elemento que aspect-ratioy ellos "ganan" sobre widtho height, entonces esos se anularán aspect-ratio. Te dije que era un poco curioso. ?

Soporte de navegador

ES DECIR	Borde	Firefox	Cromo	Safari	Ópera
No	No	86 1.2,3	90 4	TP 5	No

Android Chrome	Android Firefox	Navegador de Android	Safari de iOS	Opera Mobile
No	No	No	No	No

Más información

Artículo el 1 de julio de 2020

Un primer vistazo a la "relación de aspecto"

Sara Cope