CSS object-fit Property
28/01/2026
The CSS object-fit property is used to fit images within a specific area.
For example, the image in the frame below, which is 350px wide and 200px high, doesn’t fill the entire frame. It’s possible to fill the remaining space within the frame using the object-fit property.
Object-fit Features
The object-fit:cover, object-fit:contain, and object-fit:fill properties allow you to fit an image into a specific area as desired.
| Feature | Description |
|---|---|
| cover | It fills the entire limited space, cropping the image from the edges to fill the area. |
| contain | The image is fitted within the limited space while maintaining its aspect ratio. |
| fill | It fills the entire limited space, the width and height ratio is not maintained, and it may appear to have a stretchy texture. |
| none | It doesn’t resize the image; it displays a portion of its current dimensions. |
| scale-down | It selects the smallest size between “contain” and “none”. |
The object-fit property must be used along with the width:100%, and height:100% properties.
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>