¡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 `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 `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.
