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 dentro de un contenedor padre: tienes un contenedor de 1920x1080 y necesitas que la imagen ocupe todo ese espacio sin distorsionarse, y además que se adapte según la resolución de pantalla. Para eso existe la propiedad object-fit de CSS.

La propiedad object-fit en CSS especifica cómo debe mostrarse y ajustarse el contenido de un elemento reemplazado (como una imagen) cuando su anchura y altura difieren de las dimensiones del cuadro que lo contiene. Su utilidad radica en poder elegir cómo deseamos que el contenido se adapte a un espacio asignado cuya relación de aspecto (aspect ratio) no coincide con la del elemento.

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 ese 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.

Como ves, es una propiedad bastante curiosa que funciona de forma similar a background-size: cover, una propiedad con amplio soporte en navegadores que permite cubrir todo el fondo de un contenedor con una imagen sin distorsionarla. Misma solución, escenarios distintos: object-fit actúa sobre elementos de imagen y medios insertados directamente en el HTML, no sobre fondos.

Antes vimos cómo usar la propiedad perspective para crear un entorno 3D con CSS.

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 elementos reemplazados a:

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

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 usamos en el diseño.

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

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

Si 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 semántico del documento (por ejemplo, un <img> que debe ser accesible, indexable 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. Conocer este valor es clave para anticipar cómo se verá la imagen cuando la metemos en un contenedor con proporciones distintas.

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 de aspecto 16:9.

Qué ocurre cuando el contenedor y la imagen no coinciden en proporción

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

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 solo con CSS?

Esta propiedad cuenta con un buen soporte en los principales navegadores modernos —Chrome, Firefox y Edge entre ellos— desde hace ya varios años. Puedes usarla con total confianza para acomodar una imagen dentro de un <div> y que esta se autoajuste al contenedor sin distorsionarse.

Supongamos que tenemos la siguiente imagen:

Esta imagen tiene un aspect ratio de 16:9, con unas dimensiones de 1200x675 píxeles:

1200 ÷ 16 = 75
675 ÷ 9 = 75

Ambos valores son iguales, lo que confirma que la relación de aspecto es 16:9.

¿Qué debemos hacer para ajustar la imagen si queremos presentarla en un rectángulo de 400x100 píxeles? En ese contenedor la relación de aspecto es 4:1, totalmente diferente a la de la imagen.

Para responder esa pregunta, primero debemos conocer los valores disponibles para esta propiedad y qué significa cada uno:

Valores de la propiedad object-fit explicados uno a uno

Para entender mejor estos valores, veamos una serie de ejemplos usando la misma imagen:

Que tiene unas dimensiones de 1200px por 675px y, por lo tanto, un aspect ratio de 16:9.

Al colocarla en un contenedor de 400x100 píxeles —con un aspect ratio distinto al de la imagen— y aplicar cada uno de los valores explicados, obtenemos resultados muy diferentes.

Creamos tantos elementos <img> como valores comprende la propiedad object-fit, agrupados en una estructura de contenedores:

		<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>

El CSS define un cuadro de 400px por 100px con un borde, para facilitar la comparación visual entre los distintos valores de object-fit:

.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;
}

Aquí puedes ver cómo la imagen se ajusta con los distintos valores de object-fit: desde llenar el contenedor completamente estirando la imagen, hasta recortarla manteniendo la proporción, o indicarle que ocupe solo el espacio que puede sin recortar ni escalar. A continuación, los resultados:

object-fit: fill

Este es el valor por defecto. La imagen rellena todo el contenedor aunque para ello tenga que deformarse. Se pierde la relación de aspecto, así que úsalo solo cuando la proporción no importe.

object-fit: fill;

object-fit: contain

Con contain, la imagen se redimensiona manteniendo su proporción original. No se deforma, pero puede dejar espacios vacíos si el aspect ratio del contenedor difiere del de la imagen. Es ideal cuando necesitas mostrar la imagen completa sin recortes, aunque no cubra todo el contenedor.

object-fit: contain;

object-fit: cover

Este es el valor que más utilizo en la práctica, y seguramente el más útil en el día a día. La imagen:

• Mantiene su proporción original
• Cubre completamente el contenedor
• Puede recortar partes de los bordes para lograr el ajuste

Funciona de forma muy similar a background-size: cover y es perfecto para banners, cards o cabeceras visuales donde lo importante es cubrir el espacio disponible sin deformar la imagen.

object-fit: cover;

object-fit: none

La imagen no se redimensiona; se muestra en su tamaño original. Si es más grande que el contenedor, quedará recortada por los bordes. Es el valor menos utilizado, pero puede ser útil en casos muy concretos donde se necesite preservar el píxel exacto de la imagen.

object-fit: none;

object-fit: scale-down

Este valor se comporta como una combinación de none y contain: el navegador elige automáticamente el resultado más pequeño entre ambos.

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

Es una opción interesante cuando quieres evitar que imágenes pequeñas se amplifiquen y pierdan calidad.

object-fit: scale-down;

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

Veamos un ejemplo práctico resumido, similar a los que suelo usar en proyectos reales. El HTML:

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

CSS para adaptar la imagen al contenedor 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 todos los navegadores modernos desde hace años:

• Chrome
• Firefox
• Edge
• Opera

Esto significa que puedes usarla con total tranquilidad en cualquier proyecto actual.

Como buenas prácticas al usar object-fit:

• Define siempre width y height en el elemento; de lo contrario, la propiedad no tiene efecto visible.
• Combínala con object-position si necesitas controlar el encuadre (por ejemplo, enfocar la parte superior de una foto de persona en lugar del centro).
• Evita usar fill salvo que la deformación no sea un problema en tu diseño.

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 sin JavaScript

Errores comunes al trabajar con esta propiedad:

• Olvidar definir width y height en el elemento imagen
• Usar background-size cuando la imagen debería ser un <img> semántico
• No tener en cuenta el aspect ratio original al elegir el valor de object-fit

Conclusión

La propiedad object-fit en CSS es una de esas herramientas que, una vez que la 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.

Siguiente paso, aprende a configurar bordes con CSS.

Ver ejemplo Descargar fuente