? object-position in CSS

The object-position property controls the alignment of replaced content (like images or videos) inside their container when object-fit causes cropping or extra space.

Syntax

img {  object-position: x y;}

• x and y can be keywords (left, center, right, top, bottom) or percentages or lengths.

• Default is 50% 50% (centered).

How It Works

• When you use object-fit: cover or contain, the content might be cropped or have empty space.

• object-position shifts the visible part within the container.

Examples

/* Center the image (default) */img {  object-fit: cover;  object-position: center;}/* Align top-left */img {  object-fit: cover;  object-position: top left;}/* Align bottom right */img {  object-fit: cover;  object-position: 100% 100%;}/* Move image 30% from left, 70% from top */img {  object-fit: cover;  object-position: 30% 70%;}

Use Case

<img src="photo.jpg" style="width:300px; height:200px; object-fit: cover; object-position: top;">

The photo covers the container but is aligned to the top, so cropping happens at the bottom.

Want me to show you a live demo or how to combine object-position with object-fit for responsive images?