Una primera mirada a la “relación de aspecto”

¡Ay hola! ¡Una propiedad completamente nueva que afecta el tamaño de una caja! Eso es un gran problema. Ya existen muchas formas de crear un cuadro del tamaño de una relación de aspecto (y yo diría que esta solución basada en propiedades personalizadas es la mejor), pero ninguna de ellas es particularmente intuitiva y ciertamente no es tan sencilla como declarar una sola propiedad.

Entonces, con la inminente llegada de aspect-ratio( MDN , y que no debe confundirse con la versión de consulta de medios ), pensé en echar un vistazo a cómo funciona y tratar de entenderlo.

Un saludo a Una, donde vi esto por primera vez y, vaya, ¿cómo despertó el interés de la gente? Aquí estoy yo jugando un poco.

Simplemente dejando caer aspect-ratioun elemento se calculará una altura basada en el autoancho.

Sin establecer un ancho, un elemento seguirá teniendo un auto natural width. Entonces, la altura se puede calcular a partir de la relación de aspecto y el ancho renderizado.

.el {  aspect-ratio: 16 / 9;}

Si el contenido se vende de la relación de aspecto, el elemento aún se expandirá.

La relación de aspecto se ignora en esa situación, lo cual es realmente bueno. Es por eso que la táctica del pseudo-elemento para las relaciones de aspecto era popular, porque no nos ponía en una pérdida de datos peligrosa o en un territorio incómodo de superposición cuando el contenido era demasiado.

Pero si desea limitar la altura a la relación de aspecto, puede hacerlo agregando min-height: 0;:

Si el elemento tiene altura o ancho, el otro se calcula a partir de la relación de aspecto.

Básicamente aspect-ratioes una forma de establecer la otra dirección cuando sólo tienes una.

Si el elemento tiene altura y ancho, aspect-ratiose ignora.

La combinación de una altura y un ancho explícitos es “más fuerte” que la relación de aspecto.

Teniendo en cuenta min-*ymax-*

Siempre hay un poco de tensión entre width, min-widthy max-width(o las versiones de altura). Uno de ellos siempre “gana”. En general, es bastante intuitivo.

Si lo estableces width: 100px;y min-width: 200px;luego min-widthganarás. Entonces, min-widtho lo ignoran porque ya lo superó o gana. Lo mismo ocurre con max-width: si estableces width: 100px;y max-width: 50px;luego max-widthganarás. Entonces, max-widtho lo ignoras porque ya estás debajo de él, o gana.

Parece que la intuición general continúa aquí: las min-*propiedades max-*y ganarán o serán irrelevantes. Y si ganan, rompen el aspect-ratio.

.el {  aspect-ratio: 1 / 4;  height: 500px;  /* Ignored, because width is calculated to be 125px */  /* min-width: 100px; */  /* Wins, making the aspect ratio 1 / 2 */  /* min-width: 250px; */}

Con funciones de valor

Las relaciones de aspecto siempre son más útiles en situaciones fluidas o en cualquier momento en el que esencialmente no conozcas una de las dimensiones de antemano. Pero incluso cuando no lo sabes, a menudo estás poniendo limitaciones a las cosas. Digamos que un 50% de ancho está bien, pero solo quieres que se reduzca hasta 200 px. Podrías hacer ancho: max(50%, 200px);. O restringir en ambos lados con clamp(200px, 50%, 400px);.

Esto parece funcionar intuitivamente:

.el {  aspect-ratio: 4 / 3;  width: clamp(200px, 50%, 400px);}

¿Pero digamos que te encuentras con ese mínimo de 200 px y luego aplicas un min-widthvalor de 300 px? Las min-widthvictorias. Sigue siendo intuitivo, pero resulta complicado debido a la cantidad de propiedades, funciones y valores que pueden estar involucrados.

¿Quizás sea útil pensar en aspect-ratiola forma más débil de dimensionar un elemento?

Nunca superará ninguna otra información de tamaño, pero siempre hará su tamaño si no hay otra información disponible para esa dimensión.