La nueva propiedad de CSS que ayuda a mantener el espaciado en diseños responsivos.
Relación de aspecto
La relación de aspecto se expresa, generalmente, con dos números enteros y dos puntos en las dimensiones de ancho:altura 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 consumidores más recientes tienden a tener una relación de aspecto de 16:9.
Con la llegada del diseño responsivo, mantener la relación de aspecto resulta cada vez más importante para los desarrolladores web, especialmente debido a 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 casos en los que se vuelve importante mantener la relación de aspecto:
- Crear iframes responsivos, donde representen el 100% del ancho de un elemento superior y la altura debe mantener una proporción de viewport específica
- Crear contenedores de marcadores de posición intrínsecos para imágenes, videos e incorporaciones a fin de evitar que se modifique el diseño cuando los elementos se cargan y ocupan espacio
- Crear un espacio uniforme y responsivo para visualizaciones de datos interactivas o animaciones SVG
- Crear un espacio uniforme y responsivo para componentes de varios elementos, como tarjetas o fechas de calendario
- Crear espacio uniforme y responsivo para varias imágenes de dimensiones variables (se puede usar junto con
object-fit)
Ajuste de objeto
Definir una relación de aspecto nos ayuda a dimensionar los medios en un contexto adaptable. Otra herramienta de 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:
object-fit. Consulta la demostración de CodePen.Los valores initial y fill reajustan la imagen para llenar el espacio. En nuestro ejemplo, esto hace que la imagen se aprieta y se vea borrosa, ya que reajusta los píxeles. No es lo ideal. object-fit: cover usa la dimensión más pequeña de la imagen para llenar el espacio y la recorta en función de esa dimensión. "Acerca" en su límite más bajo. object-fit: contain garantiza que toda la imagen siempre sea visible, por lo que lo opuesto a cover, donde toma el tamaño del límite más grande (en el ejemplo anterior, es el ancho) y 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 su 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 y agradable cuando se trata de imágenes de dimensiones variables; sin embargo, se pierde información de esta manera (la imagen se recorta en sus bordes más largos).
Si estos detalles son importantes (por ejemplo, cuando se trabaja con una superficie plana de productos de belleza), no se acepta recortar contenido importante. Por lo tanto, la situación ideal serían imágenes responsivas de distintos tamaños que se ajusten al espacio de la IU sin recortarse.
El antiguo truco: mantener la relación de aspecto con padding-top
padding-top para establecer una relación de aspecto de 1:1 en las imágenes de vista previa de las publicaciones dentro de un carrusel.Para que estos 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 (alto o ancho).
Una solución para varios navegadores aceptada actualmente para mantener la relación de aspecto en función del ancho de una imagen se conoce como “Padding-Top Hack”. Esta solución requiere un contenedor superior y un contenedor secundario ubicado de manera absoluta. Luego, se calcula la relación de aspecto como un porcentaje para establecerlo como padding-top. Por ejemplo:
- Relación de aspecto de 1:1 = 1 / 1 = 1 =
padding-top: 100% - Relación de aspecto de 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 superior. Consulta el siguiente ejemplo:
<div class="container">
<img class="media" src="..." alt="...">
</div>
Luego, podríamos escribir el siguiente CSS:
.container {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.media {
position: absolute;
top: 0;
}
Se mantiene la relación de aspecto con aspect-ratio
aspect-ratio para establecer una relación de aspecto de 1:1 en las imágenes de vista previa de las publicaciones dentro de un carrusel.Lamentablemente, calcular estos valores de padding-top no es muy intuitivo y requiere cierta sobrecarga y posicionamiento adicionales. Con la nueva propiedad de CSS intrínseca aspect-ratio, el lenguaje para mantener la relación 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;
}
El uso de aspect-ratio en lugar de padding-top es mucho más claro y no modifica la propiedad de padding para realizar una acción fuera de su alcance habitual.
Esta propiedad nueva también agrega la capacidad de establecer la relación de aspecto en auto, donde "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 tanto auto como <ratio> se especifican 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 CSS, como CSS Grid y Flexbox. Considera crear una lista con elementos secundarios en la que quieras mantener una relación de aspecto de 1:1, como una cuadrícula de íconos de patrocinador:
<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 gran función de aspect-ratio es que puede crear espacio de marcador de posición para evitar el Cambio de diseño acumulado y mejorar las Métricas web. En este primer ejemplo, cargar un recurso desde una API como Unsplash crea un cambio de diseño cuando se termina de cargar el contenido multimedia.
Por otro lado, cuando usas aspect-ratio, se 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 es mediante los atributos de imagen. Si conoces las dimensiones de la imagen de antemano, una práctica recomendada es establecer estas dimensiones como width y height.
En el ejemplo anterior, si sabemos que las dimensiones son de 800 px por 600 px, el lenguaje de 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 tiene esos valores exactos de píxeles, podríamos usar los valores de los atributos de imagen para establecer la relación, combinados con un estilo de width: 100%, de modo que la imagen ocupe el espacio adecuado. En conjunto, se vería así:
<!-- Markup -->
<img src="image.jpg" alt="..." width="8" height="6">
/* CSS */
img {
width: 100%;
}
Al final, el efecto es el mismo que configurar el aspect-ratio en la imagen a través de CSS, y se evita el cambio de diseño acumulativo (consulta la demostración en CodePen).
Conclusión
Con la nueva propiedad aspect-ratio de CSS, que se inicia en varios navegadores modernos, es un poco más sencillo mantener las relaciones de aspecto adecuadas en los contenedores de contenido multimedia y diseño.
Fotos de Amy Shamblen y Lionel Gustave mediante Unsplash