Manuales 
object-position 41i3w
The object-position property determines the alignment of the contents of a replaced element inside its box. 4c393i
The contents of the replaced element can be sized to fit inside the element box using the object-fit property’s entry for more information.) Using object-position, you can change that default alignment.
The object-position property works similar to the way the <align> parameter of the preserveAspectRatio works in SVG.
Official Syntax 3xs5l
- Syntax:
object-fit: <position> - Initial: 50% 50%
- Applies To: replaced elements
- Animatable: yes
Values u704t
- <position>
-
Refer to the
<position>value entry for a list of possible values.
Examples 2h2053
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 6b4m17
View this demo on the Codrops PlaygroundBrowser 572e63
CSS3 object-fit/object-position 1si5c
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
ed from the following versions:
Desktop ea5q
- 31
- 36
- No
- 19
- 10
Mobile / Tablet 6s2f12
- 10
- 4.4
- all*
- 66
- 60