Uno de los asuntos más delicados cuando trabajamos en un proyecto web es el tema de las imágenes. Siempre me viene a la cabeza cuando creas una plantilla, y todo cuadra a la perfección. Has creado un diseño con las típicas tarjetas con su imagen y su texto, todas alineadas gracias a nuestra maestría con CSS. Pero a los pocos días te llama el cliente diciéndote que ha cambiado o añadido sus imágenes al diseño, y de repente ya nada esta alineado. Ha subido unas imágenes con una relación de aspecto (o aspect ratio) diferente al del diseño original. ¿Cómo solucionar esto?.
Lo más sencillo que se nos puede venir a la cabeza es darle unas pautas a nuestro cliente sobre las dimensiones que tienen que tener las imágenes que suba. Pero es posible que no tenga los conocimientos necesarios para redimensionar y recortar una imagen. Por supuesto, no podemos exigirle que aprenda a hacer esto, y nuestro trabajo como diseñadores es crear un entorno donde todo funcione como debe, sea cual sea la imagen que se suba. Por eso es muy útil definir un aspect ratio o relación de aspecto fijo, y que sea constante en todas las circunstancias y tamaños de pantalla.
Hasta ahora se venía usando un método, el llamado padding hack, que no era más que una solución un poco sacada de la manga al no tener una herramienta específica en CSS para este problema. Por suerte, CSS está en constante evolución, y después de años da respuesta a esta problemática con la propiedad aspect-ratio, que queremos mostraros hoy y ver como funciona.
Pero antes de entrar a tratar tanto los métodos que utilizábamos hasta ahora para trabajar con CSS, como con el nuevo método, hagamos una breve explicación sobre que es la relación de aspecto, para aquellos que no estén familiarizados con este término.
¿Qué es el aspect ratio, o relación de aspecto?
La relación de aspecto es la proporción que tiene una imagen entre su ancho y su alto, y normalmente se expresa como X:Y, siendo X el ancho e Y el alto. La relación de aspecto más básica es 1:1, que es un cuadrado, ya que su ancho es igual a su alto. Si la relación de aspecto es 2:1, la imagen es el doble de ancha que de alta. Todas las imágenes, o cualquier otro elemento que tenga la forma geométrica de un rectángulo, tiene una relación de aspecto determinada. Hay algunas que se han convertido en estándar a lo largo de los años por diferentes motivos:
- 1:1 – es el formato cuadrado, o el que usa Instagram en sus imágenes por defecto.
- 4:3 – hasta hace pocos años, este era el formato de las televisiones.
- 16:9 – el actual que se usa tanto en televisiones de alta definición como en la mayoría de los monitores.
- 21:9 – formato widescreen, usado en muchas películas.
A tener en cuenta que cuando hablamos de fotografía, la relación de aspecto que se usa de forma profesional es mucho más libre y menos estandarizada, por lo que podemos encontrar prácticamente de todo.
Una vez tenemos claro que es el aspect ratio, pasemos a ver como controlábamos hasta hace poco esta relación de aspecto en nuestra imágenes en nuestros diseños web mediante CSS.
Método antiguo: padding hack
La premisa de este método es que, añadiendo padding superior o inferior al contenedor padre de una imagen, podíamos controlar la relación de aspecto de dicha imagen. Eso sí, teníamos que hacer algún pequeño cálculo previo. Si queríamos que una imagen tuviese una relación de aspecto de 4/3, dividiríamos el número pequeño entre el grande, y lo multiplicaríamos por 100. El resultado de esta operación sería el porcentaje que pondríamos como valor del padding superior o inferior. Es decir, 3 / 4 * 100 = 75%.
<picture>
<img src="image.png">
</picture>
picture {
display: block;
position: relative;
padding-top: 75%;
}
img {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}Este método tiene varios puntos negativos. El primero, es que si queremos que el contenedor padre de la imagen tuviese un padding por cuestiones de diseño, teníamos que ingeniárnoslas para ver como añadirlo junto al padding que nos resuelve la relación de aspecto.
El segundo es que para la persona que está leyendo ese código, no es intuitivo saber que esa línea está escrita para solucionar cuestiones de relación de aspecto, ni es fácil de adivinar cual es la relación de aspecto que estamos obteniendo.
Y por último, hay que usar varias propiedades CSS extra en la imagen, como aplicarle un position: absolute;, establecer sus coordenadas para que se posicione en el sitio correcto… No es un proceso sencillo y rápido de realizar. Por suerte, esto cambia gracias a la propiedad CSS aspect-ratio.
Usando la propiedad CSS aspect-ratio
Aunque hacía ya varios años que se podía activar de forma experimental en algunos navegadores, no ha sido hasta enero de 2021 que está de forma oficial en Chrome y Safari, y desde junio en Firefox (toda esta información la podemos consultar desde Can I Use).
Para usarla, ya no necesitamos de ningún contenedor padre, ya que podemos aplicar la propiedad directamente en la imagen. Rescatemos el ejemplo anterior con la imagen que queremos que se muestre a 4:3. Ahora, con la propiedad aspect-ratio, solo hay que escribir esto:
img {
aspect-ratio: 4/3;
}Así de sencillo. Por supuesto, si hacéis alguna prueba solo con esto, veréis que el resultado no es satisfactorio. Y es porque tenemos que tener en cuenta otro par de cuestiones.
La primera es que con aspect-ratio solo le estamos diciendo al elemento la relación entre ancho y alto que debe tener, pero no sus dimensiones. Es por esto por lo que siempre debemos añadirle mediante CSS un ancho (width), o un alto (height).
La otra es que la propiedad aspect-ratio va a deformar la imagen original para ajustarla a la nueva relación de aspecto que le hemos marcado. Salvo casos excepcionales, no queremos que se deforme la imagen. Aquí es donde entra en juego una de mis propiedades CSS favoritas: object-fit. Con ella, y asignándole el valor cover, hacemos que la imagen rellene el espacio designado por la relación de aspecto, pero sin deformarse.
img {
aspect-ratio: 4/3;
width:100%;
object-fit: cover;
}Usando la propiedad aspect-ratio para crear un diseno con tarjetas
Vamos a hacer un pequeño ejemplo para ver como funciona en un proyecto real. Hemos creado un diseño con tres tarjetas, cada una con una imagen y un texto. La finalidad es que la relación de aspecto de la imagen de cada tarjeta sea la misma, sea cual se la imagen original que pongamos, para que siempre se muestren alineadas.
Tras un poco de HTML y CSS, obtenemos esto:
Aquí viene el problema. Al tener cada imagen una relación de aspecto diferente, cada una se va a mostrar al completo. Por suerte, ya sabemos como funciona la propiedad CSS aspect-ratio. Vamos a asignarle a la imagen una relación de aspecto de 4:3, por lo que si nos fijamos en una de las tarjetas, quedaría así:
Aún no es el resultado que esperábamos, ya que se nos han deformado completamente la imagen. Aquí es donde vamos a utilizar object-fit: cover;, haciendo que la imagen se ajuste al espacio disponible sin deformarse:
Ya tenemos las imágenes justo como las queríamos, y nos aseguramos que si se reemplaza alguna de las imágenes, seguiremos manteniendo el diseño original con las proporciones que hemos designado mediante CSS con aspect-ratio.
Este ejemplo lo podéis encontrar en Codepen, y ver ahí directamente el código que hemos usado, y hacer vuestras propias pruebas:
Aunque nos hemos centrado con las imágenes, la propiedad CSS aspect-ratio la podemos usar en otros elementos. Por ejemplo, si queremos crear contenedores que siempre mantengan la misma relación de aspecto, para hacer el típico listado de iconos de empresas en una fila y que se mantengan todas a un tamaño proporcionado entre ellas, o que un video mantenga siempre fijas sus proporciones, sea cual sea su contenedor. Y seguro que encontráis muchos más usos.
Por supuesto, al designar una relación de aspecto fija con la propiedad CSS aspect-ratio, esta se va a mantener sea cual sea el tamaño de pantalla desde donde se visualice la web. Algo ideal para que nuestro diseño siempre sea consistente en todas partes.
En resumen, es muy recomendable que empecemos a incluir en nuestro flujo de trabajo la propiedad CSS aspect-ratio por varios motivos. Para mí, lo más importante es que es mucho más fácil de leer que el método del padding hack, y nos ahorra escribir varias líneas de código extra. Solo por eso, ya merece la pena.
Y con esto terminamos. Como siempre, esperamos que os haya servido esta pequeña guía sobre aspect-ratio, y esperamos que empecéis a utilizarlo en vuestros proyectos, si no lo estáis haciendo ya. Podéis hacernos llegar vuestras preguntas, sugerencias y experiencias sobre esta nueva propiedad a través de los comentarios.
