Crear imágenes fluidas cuando están 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 receptivos, como esta tarjeta:
Por ahora, digamos que esta imagen no es contenido semántico, sino solo 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 responde, por lo que elegiríamos 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 en la parte superior. Podemos hacer que eso suceda con cualquier tipo de técnica de diseño de CSS, y probablemente se maneje mejor con CSS grid o flexbox.
Pero como probamos para pantallas más pequeñas, debido a la contain propiedad, esto es lo que obtenemos:
¡Oye, vuelve allí!
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 cambiar background-size a cover.
En este punto, nuestro próximo intento puede resultarle familiar: colocar la imagen en línea, en lugar del fondo.
En el escritorio, esto funciona bien:
Tampoco está mal en el móvil:
Pero en pantallas más pequeñas, debido a todos los tamaños fijos, las proporciones de la imagen se distorsionan.
Hmm, esas fresas no son tan apetecibles cuando se estiran.
Podríamos pasar horas jugando con la imagen, la tarjeta, las propiedades flexibles, yendo y viniendo. O bien, podríamos…
Separar el contenido principal del fondo
Esta es la base para obtener mucha más flexibilidad y resiliencia cuando se trata de imágenes receptivas. Puede que no sea posible el 100 % de las veces, pero, en muchos casos, se puede lograr con un poco de esfuerzo en el diseño, especialmente si este enfoque se planifica de antemano.
Para nuestra próxima iteración, colocaremos nuestra imagen de fresas en un fondo transparente y, en su lugar, estableceremos el color azul en la imagen rasterizada con CSS. ¡Continúe y juegue con los tamaños de ventana gráfica en esta demostración ajustando el tamaño del espacio de muestra!
Mirando más profundamente los estilos, observe que también hemos agregado 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 distantes queremos que estén, a través de este relleno.
Tenga en cuenta que también estamos usando márgenes negativos para compensar el relleno en el envoltorio externo de la tarjeta; de lo contrario, obtendríamos espacios en blanco alrededor de la imagen.
Utilizar el object-fit propiedad para imágenes en línea
Por mucho que la demostración anterior funcione, aún podemos mejorar el enfoque. Hasta ahora, asumimos 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 la pérdida de datos. Es semánticamente mejor poner la imagen en línea en lugar de un fondo para evitar eso, y podemos usar el object-fit propiedad para hacerlo realidad.
Hemos extraído las fresas del fondo y ahora es una línea <img> elemento, pero mantuvimos el color de fondo en esa misma imagen div.
Finalmente, combinando la object-fit: contain con un ancho del 100% permite cambiar el tamaño de la ventana y mantener la relación de aspecto de las fresas. Sin embargo, la advertencia de este enfoque 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 reducirlo alterará el diseño). Eso podría hacer que las cosas estén demasiado restringidas si necesitamos generar estas tarjetas con una cantidad variable de texto que se divide en varias líneas.
Próximamente: aspect-ratio
La solución a la inquietud anterior podría estar a la vuelta de la esquina con el próximo aspect-ratio propiedad. Esto permitirá establecer una relación fija para un elemento, como este:
.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 receptivas confiables 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.