Nuevo en Chrome 88: relación de aspecto | Programar Plus

¡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/1 es un cuadrado perfecto. Una relación de aspecto de 3/1 es un rectángulo ancho. Muchos videos apuntan a un 16/9 relació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-ratio La propiedad en CSS nos permite mantener la relación de aspecto de los elementos no reemplazados.
  • Hay algunos trucos para usarlo. Por ejemplo, definir width en un elemento con aspect-ratio dará como resultado que la propiedad use eso width valor para calcular la altura del elemento. Lo mismo ocurre con la definición de la altura. Y si definimos tanto el width y height de un elemento? El aspect-ratio se 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 →

(Visited 5 times, 1 visits today)