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

Other Resources

Browser support

Chrome Safari Firefox Opera IE Android iOS
31+ 7.1+* 36+ 26+ ? 4.4.4+ 8.4+*

* Support for object-fit but not object-position

Comments

  1. User Avatar
    Name
    Permalink to comment#

    function example() {
    element.innerHTML = “what the hell?”;
    }

  2. User Avatar
    Marek
    Permalink to comment#

    The browser support is wrong for Safari, which doesn’t support object-position at all.
    http://caniuse.com/#search=object-position

  3. User Avatar
    Serban

    I’m a bit late here, but I have an amend: third example should say object-position: 100% 100% (instead of 100% 150%), while fourth one should say object-position: 0 100% (instead of 0 150%).

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag