Propiedad CSS object-fit
15/04/2026
La propiedad CSS object-fit se utiliza para ajustar imágenes dentro de un área específica.
Por ejemplo, si una imagen en el siguiente marco, que mide 350px de ancho y 200px de alto, no llena todo el espacio, es posible completar el área restante dentro del marco utilizando la propiedad object-fit.
Características de Object-fit
Las propiedades object-fit: cover, object-fit: contain y object-fit: fill le permiten ajustar una imagen en un área específica según lo desee.
| Feature | Description |
|---|---|
| cover | Llena todo el espacio limitado, recortando los bordes de la imagen para completar el área. |
| contain | La imagen se ajusta dentro del espacio limitado manteniendo su relación de aspecto. |
| fill | Llena todo el espacio limitado; no se mantiene la relación de ancho y alto, por lo que puede estirarse. |
| none | No cambia el tamaño de la imagen; muestra una parte de sus dimensiones originales. |
| scale-down | Selecciona el tamaño más pequeño entre «contain» y «none». |
La propiedad object-fit debe utilizarse junto con las propiedades width:100% y height: 100%.
object-fit: cover
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:cover;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/uploads/microsoft-project-natick.png">
</div>object-fit: contain
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:cover;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/uploads/microsoft-project-natick.png">
</div>object-fit: fill
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:fill;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/uploads/microsoft-project-natick.png">
</div>object-fit: none
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:none;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/uploads/microsoft-project-natick.png">
</div>object-fit: scale-down
<style>
.img-container {
width: 350px;
height: 200px;
border: 1px solid #d3d3d3
}
.img-container img {
width: 100%;
height: 100%;
object-fit:scale-down;
}
</style>
<div class="img-container">
<img src="https://juniortoexpert.com/wp-content/uploads/microsoft-project-natick.png">
</div>
Advertisement
Continue Reading Below