CSS Object-Fit Property
The CSS object-fit property is used to control how an <img> or <video> fits inside its container. This is particularly useful when you want to maintain aspect ratios, avoid distortion, or focus on a specific part of the media.
It works on any media element and ensures responsive, clean layouts without manually cropping or resizing images.
Object-Fit Values
| Value | Description |
|---|---|
fill | Stretches the media to fill the container; does not preserve aspect ratio. |
cover | Preserves aspect ratio and fills the container; may crop parts. |
contain | Preserves aspect ratio and fits media inside container; may leave empty space. |
none | Media is not resized, keeps its original dimensions. |
scale-down | Scales media down to the smallest size between none and contain. |
object-fit: fill
The image is stretched or squeezed to completely fill the container. Aspect ratio is not preserved, so the image may look distorted.
<div class="image-container">
<img src="https://img.freepik.com/premium-photo/temple-lake-with-mountains-background_865967-232765.jpg" alt="Object Fit Fill" class="fit-fill">
</div>
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.fit-fill {
width: 100%;
height: 100%;
object-fit: fill;
}
object-fit: cover
The image fills the container while keeping its aspect ratio. Some parts may be cropped. Ideal for hero sections or banners.
<div class="image-container">
<img src="https://img.freepik.com/premium-photo/temple-lake-with-mountains-background_865967-232765.jpg" alt="Object Fit Cover" class="fit-cover">
</div>
.fit-cover {
width: 100%;
height: 100%;
object-fit: cover;
}
object-fit: contain
The image fits inside the container without cropping. Aspect ratio is preserved, but there may be empty space if the aspect ratios differ.
<div class="image-container">
<img src="https://img.freepik.com/premium-photo/temple-lake-with-mountains-background_865967-232765.jpg" alt="Object Fit Contain" class="fit-contain">
</div>
.fit-contain {
width: 100%;
height: 100%;
object-fit: contain;
background: #f0f0f0; /* visible in empty space */
}
object-fit: none
The image keeps its original size and does not resize. May overflow or leave empty space.
<div class="image-container">
<img src="https://img.freepik.com/premium-photo/temple-lake-with-mountains-background_865967-232765.jpg" alt="Object Fit None" class="fit-none">
</div>.fit-none {
width: 100%;
height: 100%;
object-fit: none;
}
object-fit: scale-down
The image is scaled down to the smaller size of none or contain. It will never be larger than the original.
<div class="image-container">
<img src="https://img.freepik.com/premium-photo/temple-lake-with-mountains-background_865967-232765.jpg" alt="Object Fit Scale Down" class="fit-scale-down">
</div>.fit-scale-down {
width: 100%;
height: 100%;
object-fit: scale-down;
}