Cómo ajustar imágenes y videos con object-fit en CSS
La propiedad object-fit en CSS permite controlar cómo se ajustan imágenes, videos y otros elementos reemplazables dentro de su contenedor. Es ideal para evitar deformaciones y recortes inesperados, manteniendo la proporción del contenido visual al cambiar el tamaño del contenedor.
¿Qué es object-fit y cómo se utiliza?
object-fit define cómo debe encajar un elemento multimedia dentro de su contenedor. Se aplica a elementos como <img>, <video>, o <picture>, y funciona de manera similar a background-size en imágenes de fondo, permitiendo controlar el recorte y escalado.
Sintaxis básica:
.elemento {
object-fit: cover;
}En el ejemplo anterior, la imagen o video se redimensiona para cubrir completamente el contenedor, manteniendo su relación de aspecto y sin distorsiones.
Valores principales de object-fit
1. fill: El contenido se adapta para llenar todo el contenedor, ignorando la proporción. Puede distorsionar la imagen.
2. contain: La imagen se escala para encajar dentro del contenedor sin recortar, manteniendo la proporción. Rellena el espacio restante con fondo.
3. cover: La imagen se ajusta para cubrir todo el contenedor, manteniendo la proporción y recortando lo que exceda.
4. none: La imagen no se escala y se mantiene en su tamaño original.
5. scale-down: Similar a contain o none, dependiendo de si el tamaño original es más grande o más pequeño que el contenedor.
Ejemplos de uso con object-fit
1. Mantener la proporción sin recortar (contain):
.imagen-contain {
width: 300px;
height: 200px;
object-fit: contain;
}La imagen se ajusta dentro del contenedor sin deformarse, dejando espacio vacío si las proporciones no coinciden.
2. Cubrir el contenedor con recorte (cover):
.imagen-cover {
width: 300px;
height: 200px;
object-fit: cover;
}La imagen se escalará para cubrir completamente el área del contenedor, recortando el contenido excedente.
3. Evitando distorsión (none):
.imagen-none {
width: 300px;
height: 200px;
object-fit: none;
}La imagen mantiene su tamaño original y no se ajusta al contenedor, por lo que puede quedar cortada o con scroll.
4. Ajuste automático (scale-down):
.imagen-scale-down {
width: 300px;
height: 200px;
object-fit: scale-down;
}
La imagen se ajusta para mostrar la versión más pequeña entre none y contain.
Referencia oficial
Para más detalles, consulta la documentación oficial de MDN sobre object-fit.
Jorge García
Fullstack developer