Object-fit en CSS
Float envolvía texto junto a los medios. object-fit responde otra pregunta sobre medios: cuando un img o video está dentro de un marco de tamaño fijo, ¿cómo debe llenar el contenido ese marco? Domina cover y contain antes de estirar caras con fill.
Un kit de herramientas object-fit
📊 Object-fit de un vistazo
| Valor | Trabajo cotidiano |
|---|---|
fill |
Estirar hasta la caja — puede distorsionar la proporción |
contain |
Encajar todo el medio dentro; pueden quedar bandas vacías |
cover |
Llenar la caja; puede recortar bordes |
none |
Mantener el tamaño intrínseco; puede desbordar o dejar huecos |
scale-down |
Como none o contain — el que resulte más pequeño |
object-position |
Apunta qué parte sigue visible al recortar o encajar |
object-fit brilla solo cuando el elemento reemplazado tiene anchura y altura definidas (o ambos ejes limitados). Una imagen libre con altura auto no tiene marco en el que «encajar».
Cover — llena el marco, permite recorte
Las tarjetas y miniaturas hero suelen querer cada píxel de la caja lleno. cover escala y recorta el desborde. Combina una caja cuadrada con cover para rejillas ordenadas.
.card__media {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
Contain — muestra la imagen completa
Las fotos de producto y los diagramas a menudo deben verse enteros. contain deja bandas (letterbox) si cambian las proporciones — mejor una banda que un logo cortado.
.product__img {
width: 240px;
height: 240px;
object-fit: contain;
background: #f7f7f7;
}
Fill estira — úsalo con cuidado
fill fuerza el medio al tamaño de la caja aunque se deformen las proporciones. Vale para texturas abstractas; arriesgado para caras, logos y gráficos.
.texture {
width: 320px;
height: 120px;
object-fit: fill;
}
object-position apunta el recorte
Cuando cover recorta, el centro por defecto puede ocultar una cara o un logo. Ajusta con object-position — porcentajes o palabras clave como top y left.
.avatar {
width: 96px;
height: 96px;
border-radius: 50%;
object-fit: cover;
object-position: 50% 20%;
}
Un hábito calmado de object-fit
Usa <img> / <video> reales con object-fit para medios con significado. Usa background-size cuando la imagen es solo adorno CSS. Primero dimensiona la caja, elige cover o contain, luego afina la posición.
.avatar {
width: 64px;
height: 64px;
object-fit: cover;
object-position: center top;
border-radius: 50%;
}
Pruébalo tú
- Dale a una imagen ancho y alto fijos, luego prueba
coverfrente acontain. - Crea un avatar circular con
covery mueveobject-position. - Aplica
filluna vez y nota la distorsión — luego vuelve. - Compara el mismo recorte como decoración
background-size: cover. - Escribe una frase: ¿cuándo es contain más seguro que cover?
Errores comunes
- Esperar que
object-fitfuncione sin una caja con tamaño - Usar
fillen retratos y logos - Confundir esta lección con el wrap de float o los offsets de position
- Poner fotos significativas solo en
background-image(más difícil el alt) - Olvidar
object-positioncuando cover oculta el sujeto
Resumen
object-fitencaja medios reemplazados en un marco dimensionadocoverllena y puede recortar;containmuestra todo y puede dejar bandasfillpuede distorsionar — úsalo con moderaciónobject-positionapunta la región visible- Prefiere object-fit para medios de contenido; background-size para decoración
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior