¡Oh hola! ¡Una nueva propiedad que afecta el tamaño de una caja! Eso es un gran problema. Ya hay muchas maneras de hacer un cuadro de tamaño de relación de aspecto (y diría que esta solución basada en propiedades personalizadas es la mejor), pero ninguna de ellas es particularmente intuitiva y ciertamente no tan sencilla como declarar una sola propiedad.
Así, ante la inminente llegada de aspect-ratio (MDN, y no debe confundirse con la versión de consulta de medios), pensé en echar un vistazo a cómo funciona y tratar de entenderlo.
Grita a Una donde vi esto por primera vez y cómo despertó el interés de la gente. Aquí estoy yo jugando un poco.
simplemente cayendo aspect-ratio en un elemento solo calculará una altura basada en el auto ancho.
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;
}Manifestación
Si el contenido sale de la relación de aspecto, el elemento seguirá expandiéndose.
La relación de aspecto se ignora en esa situación, lo que en realidad es bueno. Es por eso que la táctica de los pseudoelementos para las proporciones de aspecto fue popular, porque no nos puso en una peligrosa pérdida de datos o en un territorio incómodo de superposición cuando el contenido era demasiado.
Pero si desea restringir la altura a la relación de aspecto, puede agregar un min-height: 0;:
Manifestación
Si el elemento tiene una altura o un ancho, el otro se calcula a partir de la relación de aspecto.
Entonces aspect-ratio es básicamente una forma de establecer la otra dirección cuando solo tienes una.
Manifestación
Si el elemento tiene altura y anchura, aspect-ratio se 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-* y max-*
Siempre hay un poco de tensión entre width, min-width, y max-width (o las versiones de altura). Uno de ellos siempre “gana”. En general, es bastante intuitivo.
si configuras width: 100px; y min-width: 200px; entonces min-width ganará. Entonces, min-width se ignora porque ya lo superaste o gana. mismo trato con max-width: si configuras width: 100px; y max-width: 50px; entonces max-width ganará. Entonces, max-width o se ignora porque ya está debajo de él, o gana.
Parece que la intuición general continúa aquí: el min-* y max-* las propiedades 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 que esencialmente no conoce una de las dimensiones con anticipación. Pero incluso cuando no lo sabes, a menudo estás imponiendo restricciones a las cosas. Digamos que 50% de ancho es genial, pero solo quieres que se reduzca hasta 200px. 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-width de 300px? El min-width gana Todavía es intuitivo, pero se vuelve alucinante debido a la cantidad de propiedades, funciones y valores que pueden estar involucrados.
Tal vez sea útil pensar en aspect-ratio como la forma más débil de dimensionar un elemento?
Nunca superará ninguna otra información de dimensionamiento, pero siempre hará su dimensionamiento si no hay otra información disponible para esa dimensión.