Manuales 
object-position e75u
The object-position property determines the alignment of the contents of a replaced element inside its box. 132873
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 55184y
- Syntax:
object-fit: <position> - Initial: 50% 50%
- Applies To: replaced elements
- Animatable: yes
Values 584j31
- <position>
-
Refer to the
<position>value entry for a list of possible values.
Examples 3e5p5z
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 2x4j2k
View this demo on the Codrops PlaygroundBrowser k5t66
CSS3 object-fit/object-position x2i2f
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 3n671n
- 31
- 36
- No
- 19
- 10
Mobile / Tablet 4q224p
- 10
- 4.4
- all*
- 66
- 60