Images
object-position
object-position sets where the content of an img or video sits inside the element’s frame. It is written just like background-position.
Syntax
<position>Preview
Code
.box {
object-fit: none;
object-position: 25% 75%;
}Controls
Click or drag inside the box to move the center
About
Percentages line up matching points
A percentage means put the point X% across the image on the point X% across the frame. 0% lines up the left edges and 100% the right edges. A length offsets the image’s top-left corner from the frame’s top-left corner.
It only shows with gaps or overflow
With the initial object-fit: fill the image stretches to the frame, so the position changes nothing. With contain or none it moves the image within the gaps; with cover it changes which part gets cropped. The preview here adds object-fit: none to keep the natural size.
Centered by default
The initial value is 50% 50% (center), unlike background-position, which starts at 0% 0% (top left).