object-position

The object-position property is used in conjunction with object-fit property and defines how an element such as a video or image is positioned with X/Y coordinates inside its content-box. This property takes two numerical values, such as 0 10% or 0 10px. In those examples, the first number indicates that the image should be placed at the left of the content box (0), the second that it should be positioned 10% or 10px from the top. It is also possible to use negative values.

The default value for object-position is 50% 50% when using the object-fit property on an image, so that by default all images are positioned in the center of their content box, like so:

img {
  object-fit: none;
  object-position: 50% 50%; /* default value: image is centered*/
  object-position: 0 0; /* positioned top left of the content box */
}

Demo

Beneath are a few examples as to how we can manipulate the object-position of an image with the object-fit property set to none. If the content of the image does not fill the content box for whatever reason then the unfilled space will show the element’s background, which can be a color or even a background-image, as in the last example:

See the Pen Object position by Robin Rendle (@robinrendle) on CodePen.

Related Properties

• object-fit

Other Resources

• object-position on W3C
• object-position on MDN

Browser support

* Support for object-fit but not object-position