Clean • Professional
The CSS object-position property works together with object-fit to control which part of an <img> or <video> is visible inside its container.
It allows you to focus on important areas of an image or video, especially when object-fit: cover crops parts of the media.
selector {
object-position: x-axis y-axis;
}
We want the main subject on the right to be visible when using object-fit: cover.
<div class="image-container">
<img src="https://cdn.pixabay.com/photo/2015/04/11/10/06/chance-717501_640.jpg alt="Object Position Example 1" class="position-right">
</div>
.image-container {
width: 200px;
height: 150px;
border: 1px solid black;
margin-bottom: 25px;
}
.position-right {
width: 100%;
height: 100%;
object-fit: cover; /* Fill container while preserving aspect ratio */
object-position: 80% 50%; /* Focus on right-middle part */
}
We want the lower-left part of the image to remain visible when cropped.
<div class="image-container">
<img src="https://cdn.pixabay.com/photo/2015/04/11/10/06/chance-717501_640.jpg" alt="Object Position Example 2" class="position-bottom-left">
</div>
.position-bottom-left {
width: 100%;
height: 100%;
object-fit: cover; /* Preserves aspect ratio while filling container */
object-position: 15% 100%; /* Focus on bottom-left */
}
Sometimes you just want the center of the image to be visible, which is the default behavior.
<div class="image-container">
<img src="https://cdn.pixabay.com/photo/2015/04/11/10/06/chance-717501_640.jpg" alt="Object Position Center" class="position-center">
</div>
.position-center {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center; /* Focuses on center */
}
| Property | Description |
|---|---|
object-fit | Specifies how the media should fit inside its container. |
object-position | Specifies which part of the media is visible inside the container using x/y coordinates. |