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>.
It is documented as part of the CSS Images specification.
Syntax
/* Usage 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) */
}
/* Global values */
object-position: inherit;
object-position: initial;
object-position: revert;
object-position: revert-layer;
object-position: unset;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.
32+
36+
10+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more