The object-fit property in CSS is used to control the position of an image or video inside its container when object-fit is applied.
It decides which part of the image should stay visible.
1. Why Object-Position is Used
When we use object-fit: cover, some parts of the image may get cropped.
object-position helps to:
- Move the image inside the box
- Show important parts (top, center, bottom, etc.)
2. Common Object-Position Values
|
Value
|
Meaning
|
|
center
|
Default center position
|
|
top
|
Shows top part
|
|
bottom
|
Shows bottom part
|
|
left
|
Shows left part
|
|
right
|
Shows right part
|
|
x y
|
Custom position like 20% 50%
|
3. Simple Example
HTML:
<img src="image.jpg" class="photo">
CSS:
.photo {
width: 300px;
height: 200px;
object-fit: cover;
object-position: top;
}
This shows the top part of the image clearly.
4. Where It Is Used
- Profile pictures
- Banner images
- Product photos
- Image cards
- Video thumbnails
5. Advantages
· Controls visible area
· Works with object-fit
· Prevents important parts from being cut
· Improves design quality
· Simple and powerful
Conclusion
The object-fit property helps you adjust the focus of images inside fixed containers, making your layout more professional and visually accurate.
