CSS Object-fit: trabajando con proporciones

¡Hola, Dev!

Al aventurarte en este mundo del front-end, seguro que ya te has encontrado con un problema al redimensionar tus imágenes o iframes en CSS, ¿verdad? En este artículo vamos a hablar sobre una propiedad que te puede ayudar con este problema: el Object-fit.

Si ya conoces CSS, probablemente ya has oído hablar de una propiedad llamada background-size. Esta fue creada para dimensionar la imagen de fondo de un componente, así podemos controlar la forma en que la imagen ocupa el área del cuadro (box). Por otro lado, el Object-fit, a pesar de tener un propósito similar, fue desarrollado para imágenes insertadas directamente en la marcación HTML, y no solamente las insertadas como background-image.

En este artículo, abordaremos:

• La aplicación del object-fit.
• La sintaxis de esta propiedad.
• En cuáles elementos podemos utilizarla.

Object-fit

La propiedad Css Object-fit se utiliza para especificar cómo un objeto (imagen, vídeo, iframe o embed) debe ser redimensionado para ajustarse a su contenedor.

Hace referencia a diversos modos de rellenar el contenido dentro del contenedor, como preservar la proporción o estirar y ocupar el máximo del espacio posible.

Para que podamos percibir la diferencia cuando usamos esta propiedad, necesitamos definir una altura y anchura predefinida.

La sintaxis del object-fit posee algunas configuraciones. Veamos algunas de ellas:

object-fit : none
object-fit : fill
object-fit : contain
object-fit : cover
object-fit : scale-dow

¡Adelante vamos a compreender cada una!

Object-fit : none

Observa el ejemplo abajo:

Al observar la imagen, notamos que, con el object-fit: none, la imagen no es redimensionada, de forma que mantiene sus dimensiones originales. Pero, si es menor que el contenedor, la imagen entera será exhibida con su tamaño original. Ya si fuera mayor que el contenedor, será cortada.

Object-fit : fill

Observamos cómo se ve el ejemplo abajo:

Notamos que, si la proporción del contenedor y la etiqueta <img loading="lazy"> no son las mismas, la imagen será estirada.

Este es el valor estándar de la propiedad object-fit. Utilizando este valor, el contenido será redimensionado al tamaño del contenedor independientemente de su proporción.

Object-fit : contain

En este ejemplo, veamos un comportamiento diferente:

Percibimos que si la proporción de la imagen es diferente de la de la etiqueta <img loading="lazy">, quedará una parte del contenedor sin imagen.

Utilizando este valor, la imagen será redimensionada manteniendo su proporción para que toda la imagen quede dentro del contenedor.

Object-fit : cover

Vamos el ejemplo:

Con este valor, la imagen es redimensionada manteniendo su proporción; sin embargo, será redimensionada para que no quede ningún espacio vacío en el contenedor, como vimos en el ejemplo anterior.

Ocasionalmente, será cortada para encajar en el caso de que la proporción de la imagen original no corresponda a la proporción de la caja del contenido.

Object-fit: scale-down

Observa:

Imágenes menores que el tamaño del contenedor permanecen del mismo tamaño (como cuando utilizamos object-fit: none) y las imágenes mayores que el tamaño del contenedor son redimensionadas para encajar en él (como en el object-fit: contain). Utilizando este valor, percibimos que se comporta como si la propiedad object-fit tuviera el valor none o contain dependiendo de cuál de ellos resulta en una imagen menor.

Conclusión

¿Increíble, verdad? Utilizando esta propiedad puedes redimensionar cualquier elemento directamente en la marcación HTML. Además, recuerda que no se utiliza solamente para imágenes, sino también para iframes, vídeos y embeds.

¿Te gustó aprender más sobre object-fit? Te dejo acá esta Formación de HTML y CSS de Alura Latam para que conozcas más sobre HTML y CSS.

Este artículo fue traducido y adaptado por Ingrid Silva

Lorena Garcia

Lorena es estudiante de Análisis y Desarrollo de Sistemas y, actualmente, es monitora de la escuela de Front-end. Le encanta aprender cosas nuevas y compartirlas con otras personas. En su tiempo libre le gusta jugar videojuegos variados, leer libros y ver animes.