Nuevo en Chrome 88: relación de aspecto

¡Y fue lanzado ayer! La gran noticia para nosotros en CSS Land es que la nueva versión admite la aspect-ratiopropiedad. Esto viene inmediatamente 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 implemente en Edge, Firefox y otros navegadores.

Aquí está el vídeo de lanzamiento saltado al aspect-ratiosoporte:

Para aquellos que se están poniendo 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 de 3/1es un rectángulo ancho. Muchos videos apuntan a una 16/9relación de aspecto.
• Algunos elementos, como imágenes e iframes, tienen una relación de aspecto intrínseco. Eso significa que si se declara el ancho o el alto, el otro se calcula automáticamente de manera que mantenga 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 conseguir el mismo tipo de efecto.
• La compatibilidad con una aspect-ratiopropiedad en CSS nos permite mantener la relación de aspecto de los elementos no reemplazados.
• Hay algunos trucos para usarlo. Por ejemplo, definir widthun elemento con aspect-ratiodará como resultado que la propiedad utilice ese widthvalor para calcular la altura del elemento. Lo mismo ocurre con la definición de la altura. ¿Y si definimos tanto el widthcomo heightde un elemento? Se aspect-ratioignora por completo.

¡Parece que ahora es un buen momento para empezar a repasarlo!

• Módulo CSS Box Sizing Nivel 4 (especificación oficial, actualmente en borrador del editor)
• Documentación MDN
• Un primer vistazo aspect-ratio(trucos CSS)
• Definición de una unidad de relación de aspecto para CSS (Rachel Andrew, notas de CSS-Tricks)