Imágenes fluidas en un diseño de proporción variable.

Crear imágenes fluidas cuando aparecen solas en un diseño es bastante fácil hoy en día. Sin embargo, con interfaces más sofisticadas a menudo tenemos que colocar imágenes dentro de elementos responsivos, como esta tarjeta:

Por ahora, digamos que esta imagen no es contenido semántico, sino sólo decoración. Ese es un buen uso para la imagen de fondo. Y debido a que en este contexto la imagen contiene un objeto, no podemos permitir que se recorte ninguna parte cuando respondamos, por lo que elijamos background-size: contain.

Aquí es donde empieza a complicarse: en los dispositivos móviles, esta tarjeta cambia de dirección y se vuelve vertical, con la imagen arriba. Podemos hacer que esto suceda con cualquier tipo de técnica de diseño CSS, y probablemente se maneje mejor con CSS grid o flexbox.

Pero cuando probamos pantallas más pequeñas, debido a la containpropiedad, esto es lo que obtenemos:

Eso no es muy agradable. La imagen cambia de tamaño para mantener su relación de aspecto sin cortar ningún detalle, y si la imagen es contenido importante y no debe recortarse, no podemos cambiarla background-sizea cover.

Llegados a este punto, nuestro próximo intento puede resultarle familiar: coloque la imagen en línea, en lugar del fondo.

En el escritorio, esto funciona bien:

En el móvil tampoco está mal:

Pero en pantallas más pequeñas, debido a todos los tamaños fijos, las proporciones de la imagen se distorsionan.

Podríamos pasar horas jugando con la imagen, la tarjeta, las propiedades flexibles, yendo y viniendo. O podríamos…

Separe el contenido principal del fondo

Esta es la base para obtener mucha más flexibilidad y resiliencia cuando se trata de imágenes responsivas. Puede que no sea posible el 100% de las veces, pero, en muchos casos, se puede lograr con un poco de esfuerzo en el lado del diseño, especialmente si este enfoque se planifica de antemano.

Para nuestra próxima iteración, colocaremos nuestra imagen de fresas sobre un fondo transparente y estableceremos el color azul en la imagen rasterizada con CSS. ¡Continúe y juegue con los tamaños de las ventanas gráficas en esta demostración ajustando el tamaño del espacio muestral!

Al observar más profundamente los estilos, observe que también agregamos relleno al div que contiene la imagen, para que las fresas no se acerquen demasiado a los bordes. Tenemos control total de qué tan cerca o lejos queremos que estén, a través de este relleno.

Tenga en cuenta que también utilizamos márgenes negativos para compensar el relleno del envoltorio exterior de nuestra tarjeta; De lo contrario, obtendríamos espacios en blanco alrededor de la imagen.

Utilice la object-fitpropiedad para imágenes en línea

Por mucho que funcione la demostración anterior, aún podemos mejorar el enfoque. Hasta ahora, hemos asumido que la imagen era contenido no semántico, pero con este diseño, también es probable que la ilustración de la imagen sea más que una decoración.

Si ese es el caso, definitivamente no queremos que la imagen se corte porque eso esencialmente equivaldría a una pérdida de datos. Es semánticamente mejor poner la imagen en línea en lugar de un fondo para evitarlo, y podemos usar la object-fitpropiedad para que esto suceda.

Extrajimos las fresas del fondo y ahora es un imgelemento en línea, pero mantuvimos el color de fondo en ese mismo div de imagen.

Finalmente, combinar object-fit: containcon un ancho del 100% permite cambiar el tamaño de la ventana y mantener la relación de aspecto de las fresas. La advertencia de este enfoque, sin embargo, es que necesitamos establecer una altura fija para la imagen en la versión de escritorio; de lo contrario, seguirá la proporción del ancho establecido (y reducirla alterará el diseño). Eso podría restringir demasiado las cosas si necesitamos generar estas tarjetas con una cantidad variable de texto que se divide en varias líneas.

Muy pronto:aspect-ratio

La solución a la preocupación anterior podría estar a la vuelta de la esquina con la próxima aspect-ratiopropiedad. Esto permitirá establecer una proporción fija para un elemento, como esta:

.el {  aspect-ratio: 16 / 9;}

Esto significa que podremos eliminar la altura fija y reemplazarla con nuestra relación de aspecto calculada. Por ejemplo, las dimensiones en el punto de interrupción del escritorio de nuestro último ejemplo se veían así:

.image {  /* ... */  height: 184px;  width: 318px;}

Con aspect-ratio, podríamos eliminar la declaración de altura y hacer los cálculos para obtener la proporción más cercana que asciende a 184:

.image {  /* ... */  width: 318px; /*  Base width */  height: unset; /* Resets the height that was set outside the media query */  aspect-ratio: 159 / 92; /* Amounts close to a 184px height */}

La próxima propiedad se explora mejor en este artículo, si desea obtener más información al respecto.

Al final, existen múltiples formas de lograr imágenes con capacidad de respuesta confiable en un diseño de proporción variable. Sin embargo, el truco para hacer este trabajo más fácil (y mejor) no reside necesariamente en CSS; puede ser tan simple como adaptar sus imágenes, ya sea separando el primer plano del fondo (como hicimos nosotros) o seleccionando imágenes específicas que seguirán funcionando si se recorta una buena parte de los bordes.