object-position
Sets the alignment of an image or video within its container when using object-fit. It's like background-position but for replaced elements like <img> and <video>.
Quick example
img.profile-shot {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center 20%;
/* focuses the crop on the subject's face (top portion of the image) */
}Quick facts
Initial value
50% 50%Inherited
Yes
Applies to
replaced elements
Animation type
repeatableList
object-position Browser Support
Widely available Since 2020 96% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.
Safe to use without fallbacks.
32+
36+
10+
79+