La propiedad object-fit en CSS para ajustar imágenes con CSS sin deformarlas

Ver ejemplo Descargar fuente

Muchas veces quieres ajustar una imagen con CSS en un contenedor padre; por ejemplo tienes un contenedor a 1920x1080 y quieres que la imagen ocupe todo ese espacio y sin distorsionarse; y además quieres que la imagen vaya adaptándose según la resolución de la pantalla; pues, esta propiedad llamada object-fit que nos trae CSS es para ti.

La propiedad object-fit en CSS específica como el contenido de algún elemento (como una imagen) debe ser mostrado cuando la anchura y altura de este elemento varía con respecto a su contenedor (cuadro) creado por el mismo; la utilidad de esta propiedad radica en el hecho de poder elegir cómo deseamos que se ajuste el contenido a un espacio asignado (creado por el mismo) que varía en su relación de aspecto (aspect ratio) de la imagen.

Cuando trabajas con imágenes en CSS, tarde o temprano te topas con el mismo problema: tienes un contenedor con unas dimensiones concretas (por ejemplo, un hero a 1920×1080) y necesitas que la imagen ocupe todo el espacio, se adapte a distintas resoluciones y no se deforme. Esto me pasaba constantemente en diseños responsive donde la imagen debía escalar según el tamaño de pantalla sin perder proporción.

 

Para este escenario existe una propiedad pensada exactamente para eso: object-fit. En este artículo te explico qué es, cómo funciona y, sobre todo, cuándo usar cada valor, con ejemplos claros y aplicables a proyectos reales.

Cómo ves es una propiedad bastante curiosa que funciona de manera similar al background-size: cover que ya es una propiedad con bastante tiempo que la implementaron los diferentes navegadores que permite cubrir todo el fondo de un contenedor con una imagen y que esta no se distorsione, misma solución, diferentes escenarios; ya que la propiedad object-fit actúa es sobre las imágenes y no fondos.

Qué es la propiedad object-fit en CSS y para qué sirve

La propiedad object-fit define cómo se debe ajustar el contenido de un elemento reemplazado dentro de su propio cuadro de contenido.

En CSS se consideran objetos a elementos como:

• Imágenes (<img>)
• Vídeos (<video>)
• Iframes
• Embeds

Estos elementos no se comportan como un div normal, ya que tienen un tamaño intrínseco propio. Y aquí es donde suele aparecer el problema: ese tamaño no siempre encaja con el contenedor que estamos usando en el diseño.

Con object-fit podemos decidir cómo se adapta ese contenido cuando forzamos un ancho y un alto concretos.

Object-fit vs background-size: cuándo usar cada uno

Si ya llevas tiempo usando CSS, seguramente conoces background-size: cover. De hecho, cuando yo empecé a enfrentarme a estos problemas, esa era la solución habitual para fondos.

La diferencia clave es esta:

• background-size se usa con imágenes de fondo (background-image)
• object-fit se aplica directamente sobre imágenes y medios insertados en HTML

Ambas propiedades resuelven problemas similares, pero en escenarios distintos. Si la imagen forma parte del contenido (por ejemplo, una <img> que debe ser accesible y responsive), object-fit es la opción correcta.

Relación de aspecto (aspect ratio) y su impacto en las imágenes

Para entender bien object-fit, primero hay que tener claro un concepto fundamental: la relación de aspecto.

La relación de aspecto (aspect ratio) es simplemente la proporción entre el ancho y el alto de una imagen.

Cómo calcular el aspect ratio de una imagen

Por ejemplo, una imagen de 1200×675 px:

• 1200 ÷ 16 = 75
• 675 ÷ 9 = 75

Como ambos valores coinciden, la imagen tiene una relación 16:9.

Qué ocurre cuando el contenedor y la imagen no coinciden

Ahora imagina que colocas esa imagen en un contenedor de 400×100 px. El contenedor tiene una proporción 4:1, completamente distinta.

Aquí es donde entran en juego los valores de object-fit: decidirán si la imagen se estira, se recorta o deja espacios vacíos para adaptarse a ese nuevo cuadro.

Práctica: ¿Cómo ajustar una imagen a su contenedor sólo con CSS?

Esta ya es una propiedad que tiene un buen soporte en los navegadores, desde hace unos pocos años atrás que los principales navegadores como lo son Chome, Firefox y Edge que lo implementan, así que puedes emplear esta propiedad sin miedo para acomodar una imagen dentro de un div fácilmente y que esta sea autoajustable por tal motivo.

Supongamos que tenemos una imagen con el siguiente:

La imagen anterior tiene un radio aspecto de 16/9 ya que cuenta con unas dimensiones X y Y de:

1200÷16 = 75
675÷9 = 75

Ambos valores son iguales lo que indica que la relación de aspecto (aspect ratio) es de 16/9.

¿Qué debemos hacer para ajustar el contenido a mostrar de la imagen si queremos presentar la misma en un rectángulo de unos 400x100 píxeles? y en donde lógicamente la relación de aspecto es diferente a la de la imagen (4/1).

Para contestar la pregunta anterior, primero debemos cuales son los valores posibles para esta propiedad y el significado de cada uno:

Valores de la propiedad object-fit explicados uno a uno

Para entender un poco mejor estos valores asignables a la propiedad object-fit, veamos una serie de ejemplos con cada uno de estos valores; usaremos la siguiente imagen:

Que tiene unas dimensiones de 1200px por 675px y por lo tanto un radio aspecto de 16/9:

Al colocar esta imagen en un contenedor de 400x100 pixeles con un radio aspecto distinto al de la imagen y aplicando cada una de los valores explicados anteriormente.

Creamos tantos tag <img> almacenados en una estructura como valores comprenda la propiedad object-fit.

		<div class="example1">
			<div>
				<img class="uno" src="tigre.png">
				<span>object-fit: fill;</span>
			</div>
			<div>
				<img class="dos" src="tigre.png">
				<span>object-fit: contain;</span>
			</div>
			<div>
				<img class="tres" src="tigre.png">
				<span>object-fit: cover;</span>
			</div>
			<div>
				<img class="cuatro" src="tigre.png">
				<span>object-fit: none;</span>
			</div>
			<div>
				<img class="cinco" src="tigre.png">
				<span>object-fit: scale-down;</span>
			</div>
		</div>

Principalmente el CSS definido se basa en la creación de un cuadro de 400px por 100px con un borde para facilitar la diferencia entre los distintos valores provistos por la propiedad object-fit establecidos con distintos valores para las imágenes.

De esta forma podrás apreciar como la imagen se va ajustando, se va ampliando o reduciendo sin distorsionar la misma, en otras palabras; la imagen se autoajusta al contenedor de manera perfecta:

.example1 img {
	width: 400px;
	height: 100px;
	border: 2px solid #fff;
}
.example1 img.uno {
	object-fit: fill;
}
.example1 img.dos {
	object-fit: contain;
}
.example1 img.tres{
	object-fit: cover;
}
.example1 img.cuatro{
	object-fit: none;
}
.example1 img.cinco{
	object-fit: scale-down;
}

Obtenemos los siguientes resultados; aquí puedes ver cómo ajustar una imagen con los distintos valores que nos permite el object-fit sobre las imágenes; podemos desde llenar el contenedor completamente estirando la imagen o recortando la misma, o podemos indicarle que ocupe hasta donde pueda sin recortar ni escalar la misma; en resumen esas son las descripciones de los ejemplos que veremos a continuación:

object-fit: fill

Este es el valor por defecto. La imagen rellena todo el contenedor, aunque para ello tenga que deformarse.

Es útil solo cuando la proporción no importa, ya que se pierde el aspect ratio.

object-fit: fill;

object-fit: contain

Con contain, la imagen se redimensiona manteniendo su proporción original.

• No se deforma
• Puede dejar espacios vacíos

Es ideal cuando necesitas ver la imagen completa, aunque no cubra todo el contenedor.

object-fit: contain;

object-fit: cover

Este es el valor que más utilizo en la práctica.

• Mantiene la proporción
• Cubre completamente el contenedor
• Puede recortar partes de la imagen

Funciona de forma muy similar a background-size: cover y es perfecto para banners, cards o cabeceras visuales.

object-fit: cover;

object-fit: none

La imagen no se redimensiona.

• Mantiene su tamaño original
• Si es más grande que el contenedor, se recorta

Es poco usado, pero puede ser útil en casos muy concretos.

object-fit: none;

object-fit: scale-down

Este valor se comporta como una combinación de none y contain.

• Si la imagen es más pequeña que el contenedor, no se amplía
• Si es más grande, se reduce manteniendo la proporción

Es una opción interesante cuando quieres evitar escalados innecesarios.

object-fit: scale-down;

Cómo ajustar una imagen a su contenedor usando solo CSS

Veamos un ejemplo práctico resumen, similar a los que suelo usar en proyectos reales.

<div class="example">
 <img src="tigre.png" alt="Imagen de ejemplo">
</div>

CSS para adaptar imágenes sin distorsión

.example img {
 width: 400px;
 height: 100px;
 object-fit: cover;
}

Con este código, la imagen se adapta al contenedor, cubre todo el espacio y mantiene su proporción, incluso cuando el tamaño del contenedor cambia en diseños responsive.

Compatibilidad con navegadores y buenas prácticas

object-fit cuenta con amplio soporte en navegadores modernos desde hace años:

• Chrome
• Firefox
• Edge
• Opera

Esto significa que puedes usarla con total tranquilidad en proyectos actuales.

Como buena práctica:

• Define siempre width y height
• Combínala con object-position si necesitas controlar el encuadre
• Evita usar fill salvo que la deformación no sea un problema

Cuándo usar object-fit y errores comunes a evitar

Usa object-fit cuando:

• Necesites imágenes responsive sin deformación
• Trabajes con cards, galerías o hero sections
• Quieras controlar recortes de forma precisa

Errores comunes:

• Olvidar definir dimensiones
• Usar background-size cuando la imagen debería ser una <img>
• No tener en cuenta el aspect ratio original

Conclusión

La propiedad object-fit en CSS es una de esas herramientas que, una vez entiendes bien, te ahorra muchos dolores de cabeza. En mi experiencia, es la solución más limpia y flexible para ajustar imágenes a contenedores sin sacrificar diseño ni proporciones.

Si trabajas con layouts modernos y responsive, dominar object-fit no es opcional: es esencial.

Ver ejemplo Descargar fuente