La propiedad aspect-ratio de CSS

Es la propiedad de CSS que ayuda a mantener el espaciado en los diseños responsivos.

Una Kravets

Relación de aspecto

La relación de aspecto se expresa con mayor frecuencia como dos números enteros y dos puntos en las dimensiones de ancho:alto o x:y. Las relaciones de aspecto más comunes para la fotografía son 4:3 y 3:2, mientras que los videos y las cámaras de consumo más recientes suelen tener una relación de aspecto de 16:9.

Con la llegada del diseño responsivo, mantener la relación de aspecto se ha vuelto cada vez más importante para los desarrolladores web, especialmente a medida que las dimensiones de las imágenes difieren y los tamaños de los elementos cambian según el espacio disponible.

Estos son algunos ejemplos de situaciones en las que es importante mantener la relación de aspecto:

• Crear elementos iframe responsivos, en los que ocupen el 100% del ancho de un elemento superior y la altura conserve una proporción específica del viewport
• Crear contenedores de marcadores de posición intrínsecos para imágenes, videos y elementos incorporados para evitar el reajuste cuando los elementos se cargan y ocupan espacio
• Cómo crear un espacio uniforme y responsivo para las visualizaciones de datos interactivas o las animaciones SVG
• Crear un espacio uniforme y responsivo para componentes de varios elementos, como tarjetas o fechas de calendario
• Crear un espacio uniforme y responsivo para varias imágenes de dimensiones variables (se puede usar junto con object-fit)

Object-fit

Definir una relación de aspecto nos ayuda a dimensionar el contenido multimedia en un contexto responsivo. Otra herramienta en este bucket es la propiedad object-fit, que permite a los usuarios describir cómo un objeto (como una imagen) dentro de un bloque debe llenar ese bloque:

Los valores initial y fill reajustan la imagen para llenar el espacio. En nuestro ejemplo, esto hace que la imagen se vea comprimida y borrosa, ya que se reajustan los píxeles. No es ideal. object-fit: cover usa la dimensión más pequeña de la imagen para completar el espacio y recorta la imagen para que quepa en él según esta dimensión. Se "acerca" en su límite inferior. object-fit: contain garantiza que toda la imagen siempre sea visible, por lo que es lo opuesto a cover, en el que se toma el tamaño del límite más grande (en nuestro ejemplo anterior, este es el ancho) y se cambia el tamaño de la imagen para mantener su relación de aspecto intrínseca mientras se ajusta al espacio. El caso object-fit: none muestra la imagen recortada en el centro (posición predeterminada del objeto) en su tamaño natural.

object-fit: cover suele funcionar en la mayoría de las situaciones para garantizar una interfaz uniforme agradable cuando se trabaja con imágenes de dimensiones variables. Sin embargo, de esta manera se pierde información (la imagen se recorta en sus bordes más largos).

Si estos detalles son importantes (por ejemplo, cuando se trabaja con una toma cenital de productos de belleza), no se acepta recortar el contenido importante. Por lo tanto, el escenario ideal serían imágenes responsivas de diferentes tamaños que se ajusten al espacio de la IU sin recortarse.

El truco anterior: mantener la relación de aspecto con padding-top

Para que sean más responsivos, podemos usar la relación de aspecto. Esto nos permite establecer un tamaño de proporción específico y basar el resto del contenido multimedia en un eje individual (altura o ancho).

Una solución entre navegadores que se acepta actualmente para mantener la relación de aspecto según el ancho de una imagen se conoce como "Padding-Top Hack". Esta solución requiere un contenedor principal y un contenedor secundario colocado de forma absoluta. Luego, se calcularía la relación de aspecto como un porcentaje para establecerla como padding-top. Por ejemplo:

• Relación de aspecto 1:1 = 1 / 1 = 1 = padding-top: 100%
• Relación de aspecto 4:3 = 3 / 4 = 0.75 = padding-top: 75%
• Relación de aspecto de 3:2 = 2 / 3 = 0.66666 = padding-top: 66.67%
• Relación de aspecto de 16:9 = 9 / 16 = 0.5625 = padding-top: 56.25%

Ahora que identificamos el valor de la relación de aspecto, podemos aplicarlo a nuestro contenedor principal. Consulta el siguiente ejemplo:

<div class="container">
  <img class="media" src="..." alt="...">
</div>

Luego, podríamos escribir el siguiente código CSS:

.container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.media {
  position: absolute;
  top: 0;
}

Cómo mantener la relación de aspecto con aspect-ratio

Lamentablemente, calcular estos valores de padding-top no es muy intuitivo y requiere cierta sobrecarga y posicionamiento adicionales. Con la nueva propiedad CSS intrínseca aspect-ratio, el lenguaje para mantener las relaciones de aspecto es mucho más claro.

Con el mismo lenguaje de marcado, podemos reemplazar padding-top: 56.25% por aspect-ratio: 16 / 9 y establecer aspect-ratio en una proporción especificada de width / height.

.container {
  width: 100%;
  padding-top: 56.25%;
}

.container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Usar aspect-ratio en lugar de padding-top es mucho más claro y no modifica la propiedad de padding para hacer algo fuera de su alcance habitual.

Esta nueva propiedad también agrega la capacidad de establecer la relación de aspecto en auto, en la que "los elementos reemplazados con una relación de aspecto intrínseca usan esa relación de aspecto; de lo contrario, la caja no tiene una relación de aspecto preferida". Si se especifican auto y <ratio> juntos, la relación de aspecto preferida es la relación especificada de width dividida por height, a menos que sea un elemento reemplazado con una relación de aspecto intrínseca, en cuyo caso se usa esa relación de aspecto.

Ejemplo: Coherencia en una cuadrícula

Esto también funciona muy bien con los mecanismos de diseño de CSS, como CSS Grid y Flexbox. Considera una lista con elementos secundarios que deseas mantener con una relación de aspecto de 1:1, como una cuadrícula de íconos de patrocinadores:

<ul class="sponsor-grid">
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
  <li class="sponsor">
    <img src="..." alt="..."/>
  </li>
</ul>

.sponsor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

.sponsor img {
  aspect-ratio: 1 / 1;
  width: 100%;
  object-fit: contain;
}

Ejemplo: Cómo evitar el cambio de diseño

Otra excelente función de aspect-ratio es que puede crear espacio de marcador de posición para evitar el cambio de diseño acumulado y ofrecer mejores Core Web Vitals. En este primer ejemplo, cargar un activo desde una API como Unsplash crea un cambio de diseño cuando finaliza la carga del contenido multimedia.

Por otro lado, usar aspect-ratio crea un marcador de posición para evitar este cambio de diseño:

img {
  width: 100%;
  aspect-ratio: 8 / 6;
}

Sugerencia adicional: Atributos de imagen para la relación de aspecto

Otra forma de establecer la relación de aspecto de una imagen es a través de los atributos de imagen. Si conoces las dimensiones de la imagen con anticipación, es una práctica recomendada establecer estas dimensiones como sus width y height.

En el ejemplo anterior, como sabemos que las dimensiones son de 800 px por 600 px, el marcado de la imagen se vería de la siguiente manera: <img src="image.jpg" alt="..." width="800" height="600">. Si la imagen enviada tiene la misma relación de aspecto, pero no necesariamente esos valores de píxeles exactos, podríamos seguir usando los valores de los atributos de la imagen para establecer la relación, combinados con un estilo de width: 100% para que la imagen ocupe el espacio adecuado. En conjunto, se vería de la siguiente manera:

<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">

/* CSS */
img {
  width: 100%;
  height: auto;
}

Al final, el efecto es el mismo que establecer aspect-ratio en la imagen a través de CSS, y se evita el cambio de diseño acumulado (consulta la demostración en Codepen).

Conclusión

Con la nueva propiedad aspect-ratio de CSS, que se lanzó en varios navegadores modernos, mantener las relaciones de aspecto adecuadas en tus contenedores de diseño y medios es un poco más sencillo.

Fotos de Amy Shamblen y Lionel Gustave a través de Unsplash.