CSS object-position Property – Positioning with object-fit

Definition and Usage

The object-position property specifies the position at which the content (the object, such as an image or video) of a replaced element is aligned within its element’s content box.

You can use this property to align image or video content within its element's box based on the desired position. It's primarily used in combination with the object-fit property.

Basic Example

Formal syntax

Values

Accepted values for the object-position property
`position`	Specifies the position of the image or video content inside the content box. The first value controls the horizontal (x-axis) alignment, and the second controls the vertical (y-axis) alignment. The values can be keyword positions such as `left`, `center`, or `right`, or numeric lengths such as pixels or percentages. Negative values are allowed.

Syntax

CSS

/* Keyword values */
object-position: top;
object-position: bottom;
object-position: left;
object-position: right;
object-position: center;
object-position: center top;

/* Percentage values */
object-position: 45% 55%;

/* Length values */
object-position: 0 0;
object-position: 1cm 2cm;
object-position: 13ch 6em;

/* Edge offset values (keyword + length combinations) */
object-position: top 0 right 10px;
object-position: bottom 12px right 20px;
object-position: right 3rem bottom 10px;

/* Global values */
object-position: inherit;
object-position: initial;
object-position: unset;
object-position: revert;
object-position: revert-layer;

Formal definition

The object-position property specifies the position at which replaced content (such as images or videos) is aligned within its element’s content box. This determines the starting position within the content box and is primarily used with the object-fit property on <img> and <video> elements.

Formal definition of the object-position property
Initial value	`50% 50%`
Applies to	replaced elements
Inherited	yes
Percentages	refer to width and height of element itself
Computed value	as specified
Animatable	yes

Practical Examples

Let's explore how this property works using examples with images and videos.

Image Example

CSS

.container {
    width: 260px;
    height: 250px;
    border: 5px dashed red;
}
img {
    width: 100%;
    height: 100%;
    object-fit: none;
    object-position: left bottom;
}

Video Example

CSS

.container {
    width: 260px;
    height: 250px;
    border: 5px dashed red;
}
video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}