CSS object-position

The CSS object-position property is used to specify the alignment of the replaced content (such as an image or video) within its container. The replaced content is an external resource, like an image, that is inserted using the object-fit property.

The object-position property takes two values: the horizontal position and the vertical position, each specified as a percentage, length value, or keyword.

Syntax:

selector {
  object-position: x-axis y-axis;
}

• selector: Represents the HTML element or class to which the object-position property will be applied.
• x-axis: Specifies the horizontal alignment of the replaced content within its container. It can be a percentage, a length value (in pixels, em, etc.), or a keyword such as left, center, or right.
• y-axis: Specifies the vertical alignment of the replaced content within its container. It can be a percentage, a length value, or a keyword such as top, center, or bottom.

Example:

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

img {
  object-fit: cover;
  object-position: center top;
}

In this example, the .image-container has a fixed width and height with overflow: hidden;, creating a clipping effect. The image inside the container is scaled to cover its entire area (using object-fit: cover;) while aligning the center horizontally and the top vertically (using object-position: center top;).

The object-position property is commonly used in combination with object-fit to control how images or videos are positioned and scaled within their containers. It allows you to create visually pleasing layouts and tailor the presentation of the replaced content to better fit the overall design.

Keep in mind that the object-position property only applies to elements with a defined object-fit value, and it may not be supported by older browsers. Therefore, always check for cross-browser compatibility when using these properties in production.