The CSS object-position property is used together with the object-fit property to specify how an <img> or <video> should be positioned with x/y coordinates within its container.
The first value controls the x-axis and the second value controls the y-axis. The value can be a string (left, center or right), or a number (in px or %). Negative values are also allowed.
Using the object-position Property
Let's say that the part of the image that is shown, is not the part that we want. To position the image, we will use the object-position property.
Here we position the image so that the great old building is in center:
Example
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
} .image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 80% 100%;
}Live preview
Here we will use the object-position property to position the image so that the famous Eiffel Tower is in center:
Example
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
} .image-container img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 15% 100%;
}Live preview
CSS Object-* Properties
The following table lists the CSS object-* properties:
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |