css - Object-Position

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:

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.