CSS Reference Property

object-position

The object-position property determines the alignment of the contents of a replaced element inside its box.

The contents of the replaced element can be sized to fit inside the element box using the object-fit property. By default, they will be positioned at the center of the element’s box. (Refer to the object-fit property’s entry for more information.) Using object-position, you can change that default alignment.

Trivia & Notes

The object-position property works similar to the way the <align> parameter of the preserveAspectRatio works in SVG.

Official Syntax

  • Syntax:

    object-fit: <position>
                           
  • Initial: 50% 50%
  • Applies To: replaced elements
  • Animatable: yes

Values

<position>
Refer to the <position> value entry for a list of possible values.

Examples

The following example sets the dimensions of an <img> element, and then uses the object-fit property to fit the contents of that image (the referenced image in the src attribute) to these dimensions.

The object-position property is then used to align the contents of the image inside the image box.

.bio--avatar {
    width: 5em;
    height: 5em;
    object-fit: cover;
    object-position: top left;
}
                

The following are all possible values for the object-position property:

object-position: top right 20px;
object-position: 100% 100%;
object-position: 0 30px;
object-position: 1em 1em;
                

Browser Support

CSS3 object-fit/object-position

Method of specifying how an object (image or video) should fit inside its box. object-fit options include "contain" (fit according to aspect ratio), "fill" (stretches object to fill) and "cover" (overflows box but maintains ratio), where object-position allows the object to be repositioned like background-image does.

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 31
  • 36
  • No
  • 19
  • 10

Mobile / Tablet

  • 10
  • 4.4
  • all*
  • 59
  • 54

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:41 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.