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;
Live Demo
View this demo on the Codrops PlaygroundBrowser 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
- 32
- 36
- No
- 19
- 10
Mobile / Tablet
- 10
- 4.4
- all*
- 131
- 132
