css - Object-Fit
The object-fit property in CSS is used to control how an image or video fits inside a fixed-size container. It helps avoid image stretching and keeps the layout clean and responsive.
1. Why Object-Fit is Used
Normally, when we fix the width and height of an image, it may:
- Stretch
- Get distorted
- Lose its proper shape
object-fit solves this problem by adjusting the image properly inside the box.
2. Common Object-Fit Values
|
Value |
Use |
|
fill |
Stretches image (default) |
|
cover |
Fills box and crops extra part |
|
contain |
Shows full image inside box |
|
none |
Keeps original size |
|
scale-down |
Chooses smaller size |
3. Simple Example
HTML:
<img src="image.jpg" class="photo">
CSS:
.photo {
width: 300px;
height: 200px;
object-fit: cover;
}
The image fills the container without distortion.
4. Where It Is Used
- Website banners
- Image cards
- Profile pictures
- Product images
- Video frames
5. Advantages
- Prevents image stretching
- Maintains aspect ratio
- Easy to use
- Works for images and videos
- Important for responsive design
Conclusion
The object-fit property is an important CSS feature that helps display images neatly inside fixed containers without losing quality or shape.