Object-fit en CSS controla cómo se adapta el contenido de una imagen o un vídeo a la caja que has definido. Para llenar un espacio sin deformar una foto, utiliza object-fit: cover. Para verla completa, utiliza contain.
La clave es distinguir la caja del elemento de la imagen que se dibuja dentro. Si no hay una diferencia de proporciones, cambiar object-fit puede no producir un cambio visible.
Ejemplo de imagen con altura uniforme
<img class="foto" src="imagenes/proyecto.webp"
alt="Vista de la página principal del proyecto"
width="1200" height="800">
<style>
.foto {
display: block;
width: 100%;
height: 280px;
object-fit: cover;
object-position: center;
border-radius: 16px;
}
</style>La caja tiene un ancho flexible y una altura de 280 píxeles. La imagen conserva su proporción y recorta lo que no cabe. Los atributos HTML describen las dimensiones del recurso de ejemplo; adapta sus valores a tu archivo real.
Cover y contain: diferencia práctica
cover cubre toda la caja y puede ocultar bordes de la fotografía. Encaja en tarjetas cuando el recorte no elimina información necesaria.
contain mantiene la imagen completa dentro de la caja. Puede dejar bandas vacías y suele resultar útil para productos que necesitan verse enteros.
.producto {
width: 100%;
height: 320px;
object-fit: contain;
background: #f1f5f9;
}El espacio sobrante no es un error: es la consecuencia de mantener todo el contenido y su proporción.
Cómo hacer una proporción responsive con aspect-ratio
.miniatura {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}Esta regla define una caja con proporción 16:9. Así puedes unificar miniaturas sin una altura fija para todos los anchos. Asegúrate de que otras reglas no estén imponiendo una altura incompatible.
Cómo mover el recorte con object-position
.retrato {
width: 100%;
height: 360px;
object-fit: cover;
object-position: 50% 25%;
}object-position indica cómo alinear el contenido dentro de su caja. Ajustarlo puede mantener visible una cara o una zona importante, pero no recupera simultáneamente todas las partes de una imagen recortada.
Qué hacen fill, none y scale-down
fill estira el contenido para ocupar la caja y puede deformarlo. none no lo redimensiona para encajarlo. scale-down elige el resultado más pequeño entre el tamaño de none y el de contain.
Para una foto que debe verse completa y reducirse solo si es necesario, scale-down puede ser útil. Prueba con imágenes mayores y menores que la caja para entender el resultado.
Object-fit no sirve para todos los elementos
No adapta una imagen declarada como fondo: en ese caso necesitas background-size. Tampoco es una forma de hacer responsive el documento dentro de un iframe.
Además, recortar con CSS no reduce el archivo descargado. Si sirves una foto enorme como miniatura, sigue siendo necesario optimizar el recurso y, cuando corresponda, utilizar imágenes responsive.
Preguntas frecuentes
¿Por qué cover corta mi imagen?
Porque debe llenar una caja con otra proporción. Usa contain si necesitas mostrar todo el contenido.
¿Puedo aplicarlo a vídeo?
Sí. Comprueba que el recorte no tape información importante, como texto integrado o demostraciones.
Antes de ajustar la presentación, repasa cómo insertar imágenes correctamente. Continúa en Aprender CSS.
Referencia técnica: documentación de MDN.
