Cómo ajustar imágenes y vídeos a diferentes resoluciones con CSS (object-fit)

A menudo sucede que las imágenes de un diseño a maquetar tienen un formato concreto (1:1, 4:3, 16:9…) para un ancho de pantalla específico pero que en otra resolución cambia su proporción. Si la imagen es decorativa la mejor opción para hacerla flexible es utilizar la propiedad background-size con los valores cover o contain pero si la imagen es de contenido esta solución ya no nos vale, da igual que se meta la imagen a través de un CMS o directamente en el documento HTML. Así que, o bien servimos una imagen diferente para cada uno de los anchos de pantalla en los que cambia la proporción de la imagen utilizando el atributo srcset de la etiqueta <img> o bien ajustamos la que tenemos al nuevo formato.

El enfoque antiguo

No hace tanto tiempo, para conseguir este efecto teníamos que añadir un contenedor envolviendo la imagen y darle la proporción que deseábamos y colocar la imagen en su interior posicionada de manera absoluta. Así resolvíamos la mayoría de los casos aunque de vez en cuando alguna excepción nos exigía ser más creativos.

.image-wrapper {
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  position: relative;
}

.image-wrapper > img {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  top: 0;
}

Object-fit y Object-position

Según la especificación de la W3C, la propiedad object-fit sirve para definir cómo va a adaptar un elemento de imagen o vídeo su contenido a su contenedor, y puede combinarse con la propiedad object-position, que determina en qué punto del contenedor va a situarse el contenido. Estas propiedades son similares a background-size y background-position.

object-fit puede contener los valores: fill, contain, cover, none y scale-down

Para las etiquetas HTML <img> y <video> entendemos como contenedor la propia etiqueta, y contenido como la imagen o vídeo enlazado mediante el atributo src.

• Fill - Adapta el contenido para que se ajuste a su contenedor sin respetar su proporción original.
• Contain - Redimensiona el contenido manteniendo su proporción mientras se ajusta en su contenedor. El contenido puede no rellenar el contenedor y se podrá ver el color de imagen de fondo.
• Cover - Redimensiona el contenido manteniendo su proporción y llenando el contenedor aunque por contra podemos perder información de la imagen.
• None - No se redimensiona el contenido por lo que se muestra con su tamaño original pero sin desbordarse del tamaño marcado por el contenedor.
• Scale-down - Compara el resultado de las propiedades none y contain y elegirá la que dé un tamaño más pequeño.

En la demo puedes ver cómo funciona cada uno de los valores de esta propiedad.

Soporte

El soporte es bastante amplio y no tenemos de qué preocuparnos si no tenemos que dar soporte a Internet Explorer 11 :D

Conclusión

CSS es un lenguaje en evolución constante y la implementación de las nuevas propiedades y especificaciones de los navegadores muy rápida. Con el paso de los años se simplifican tareas porque surgen propiedades que nos ayudan a resolver y agilizar tareas más o menos habituales pero por contra el lenguaje es más amplio lo que dificulta algo más su aprendizaje. Pero es parte de la evolución y la vida. CSS se hace mayor. En cualquier caso, estamos de celebración porque hacer una imagen de contenido responsive, es decir, adaptarla a diferentes resoluciones es más fácil que nunca.