¡Y se estrenó ayer! La gran noticia para nosotros en CSS Land es que la nueva versión admite la aspect-ratio propiedad. Esto viene justo después de que Safari anunciara su soporte en Safari Technology Preview 118, que se lanzó el 6 de enero. Eso nos da algo que esperar a medida que se implementa en Edge, Firefox y otros navegadores.
Aquí está el video de lanzamiento omitido antes de la aspect-ratio apoyo:
Para los que se ponen al día:
- Una relación de aspecto define la proporción de las dimensiones de un elemento. Por ejemplo, una caja con una relación de aspecto de
1/1es un cuadrado perfecto. Una relación de aspecto de3/1es un rectángulo ancho. Muchos videos apuntan a un16/9relación de aspecto - Algunos elementos, como imágenes e iframes, tienen una relación de aspecto intrínseca. Eso significa que si se declara el ancho o el alto, el otro se calcula automáticamente de una manera que mantiene su proporción.
- Los elementos no reemplazados, como los divs, no tienen una relación de aspecto intrínseca. Hemos recurrido a un truco de relleno para obtener el mismo tipo de efecto.
- Soporte para un
aspect-ratioLa propiedad en CSS nos permite mantener la relación de aspecto de los elementos no reemplazados. - Hay algunos trucos para usarlo. Por ejemplo, definir
widthen un elemento conaspect-ratiodará como resultado que la propiedad use esowidthvalor para calcular la altura del elemento. Lo mismo ocurre con la definición de la altura. Y si definimos tanto elwidthyheightde un elemento? Elaspect-ratiose ignora por completo.
¡Parece que ahora es un buen momento para empezar a repasarlo!
- Módulo de tamaño de caja CSS Nivel 4 (Especificación oficial, actualmente en Borrador del editor)
- Documentación MDN
- Un primer vistazo a
aspect-ratio(CSS-Trucos) - Definición de una unidad de relación de aspecto para CSS (Rachel Andrew, notas de CSS-Tricks)
Enlace directo →