Propiedad CSS object-fit
Usa la propiedad CSS object-fit para definir cómo un elemento se ajusta en su contenedor. Consulta los valores con ejemplos.
La propiedad CSS object-fit controla cómo un elemento reemplazado — como un <img> o un <video> — se redimensiona para llenar su caja de contenido. Es el equivalente de background-size para imágenes y vídeos: en lugar de estirar o distorsionar el contenido multimedia, decides si debe llenar, ajustarse, recortarse o permanecer sin cambios dentro de la caja que le asignaste.
Esta página explica qué hace object-fit, cuándo usarlo, cada uno de sus valores con un ejemplo ejecutable y las propiedades relacionadas para afinar el resultado.
Por qué usar object-fit
Cuando estableces un width y un height fijos en una imagen cuya relación de aspecto difiere de esa caja, el navegador estira la imagen de forma predeterminada — los rostros se aplanan, los logotipos se deforman. object-fit resuelve esto. Te permite mantener las dimensiones de la caja (importante para layouts predecibles y cuadrículas) mientras indicas al navegador cómo conciliar la relación de aspecto natural de la imagen con esa caja:
- Usa
coverpara imágenes hero, miniaturas y avatares — llena la caja, recorta el desbordamiento, nunca distorsiona. Este es el valor que usarás con más frecuencia. - Usa
containcuando la imagen completa deba permanecer visible (logotipos, fotografías de productos) aunque eso deje espacio vacío. - Usa
fill(el valor predeterminado) solo cuando realmente quieras que la imagen se estire hasta la caja exacta.
De forma predeterminada, la imagen queda centrada dentro de su caja. Para controlar qué parte se mantiene visible al recortar con cover, combina object-fit con object-position.
| Valor inicial | fill |
|---|---|
| Se aplica a | Elementos reemplazados (<img>, <video>, <object>, etc.). |
| Heredado | No. |
| Animable | No. |
| Versión | CSS3 |
| Sintaxis DOM | object.style.objectFit = "cover"; |
Sintaxis
Sintaxis CSS de object-fit
object-fit: fill | contain | cover | scale-down | none | initial | inherit;En todos los ejemplos a continuación, la caja tiene 200px de ancho y 400px de alto — una caja alta y estrecha — mientras que la imagen de origen es horizontal. Esa discrepancia es lo que hace visible el comportamiento de cada valor.
Ejemplo de la propiedad object-fit con el valor "fill"
fill (el valor predeterminado) ignora la relación de aspecto y estira la imagen para que coincida exactamente con la caja, por lo que el árbol queda aplastado.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: fill;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Fill value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Resultado
La imagen se estira para ajustarse a la caja, distorsionándola. El siguiente valor, cover, soluciona esto recortando en lugar de estirar.
Ejemplo de la propiedad object-fit con el valor "cover"
cover escala la imagen para llenar toda la caja conservando su relación de aspecto, y luego recorta lo que desborda. Nada se distorsiona, pero los bordes pueden quedar cortados. Es la opción ideal para miniaturas y banners hero.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: cover;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Cover value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Ejemplo de la propiedad object-fit con el valor "contain"
contain escala la imagen para que quepa dentro de la caja conservando su relación de aspecto, de modo que toda la imagen permanece visible. Como la caja es más alta que ancha la imagen, esto deja bandas vacías arriba y abajo (conocido como letterboxing).
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: contain;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Contain value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Ejemplo de la propiedad object-fit con el valor "none"
none mantiene la imagen en su tamaño intrínseco (natural) e ignora completamente las dimensiones de la caja. La imagen queda centrada y cualquier parte que exceda la caja se recorta. Úsalo cuando debas preservar el tamaño de píxeles original.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: none;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>None value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Ejemplo de la propiedad object-fit con el valor "scale-down"
scale-down compara none y contain y usa el que produce la imagen renderizada más pequeña. En la práctica, se comporta como contain para imágenes más grandes que la caja, y como none para imágenes más pequeñas — una forma segura de reducir contenido multimedia sobredimensionado sin escalar nunca hacia arriba imágenes pequeñas.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img.tree {
width: 200px;
height: 400px;
object-fit: scale-down;
}
</style>
</head>
<body>
<h2>Object-fit property example</h2>
<h3>Original image:</h3>
<img src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
<h3>Scale-down value:</h3>
<img class="tree" src="/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg" alt="Tree" width="300" height="200" />
</body>
</html>Valores
| Valor | Descripción |
|---|---|
| fill | Predeterminado. Estira el contenido para llenar exactamente la caja de contenido, ignorando su relación de aspecto (la imagen puede distorsionarse). |
| contain | Escala el contenido para que quepa dentro de la caja conservando su relación de aspecto; puede aparecer espacio vacío (letterboxing). |
| cover | Escala el contenido para llenar la caja conservando su relación de aspecto; los bordes que desbordan se recortan. |
| none | Mantiene el contenido en su tamaño intrínseco, ignorando la caja; centrado y recortado si desborda. |
| scale-down | Renderiza el contenido como el más pequeño entre none y contain — nunca escala la imagen hacia arriba. |
| initial | Hace que la propiedad use su valor predeterminado (fill). |
| inherit | Hereda la propiedad de su elemento padre. |
Compatibilidad con navegadores y consejos
object-fit es compatible con todos los navegadores modernos. Ten en cuenta estos puntos:
- Solo afecta a elementos reemplazados (
<img>,<video>,<object>, SVG embebido). No hace nada en un<div>— usabackground-sizeallí en su lugar. - El elemento sigue ocupando el
width/heightque estableciste;object-fitsolo cambia cómo se pinta el contenido dentro de esa caja. - Combínalo con
object-positionpara elegir qué parte de la imagen permanece visible al usarcoveronone. - Si el desbordamiento recortado debe permanecer oculto, la caja ya lo recorta; obtén más información en CSS overflow.