Definition
The object-position CSS property is used to specify the horizontal and vertical position of an element, such as an <img> or <video>, within its container when using the object-fit property. It allows you to precisely control the placement of the element’s content within its designated space.
The object-position property accepts two values that represent the horizontal and vertical positions, respectively. These values can be specified using length units (such as pixels or percentages) or keywords.
Here’s an example:
.image-container img {
object-fit: cover;
object-position: center top;
}
In this example, the object-fit: cover; rule ensures that the image fills the entire container while maintaining its aspect ratio. The object-position: center top; rule positions the image’s content at the center horizontally and at the top vertically within the container.
You can adjust the object-position values to position the element’s content as desired, such as left top, right bottom, or using specific pixel or percentage values.
The object-position property works in conjunction with object-fit to give you precise control over the positioning and resizing of an element’s content within its container. It allows you to create custom layouts and visual effects by precisely placing the content.