The object-position
CSS property specifies the alignment of the selected replaced element's contents within the element's box. Areas of the box which aren't covered by the replaced element's object will show the element's background.
You can adjust how the replaced element's object's intrinsic size (that is, its natural size) is adjusted to fit within the element's box using the object-fit
property.
/* <position> values */ object-position: center top; object-position: 100px 50px; /* Global values */ object-position: inherit; object-position: initial; object-position: unset;
<position>
Note: The position can be set so that the replaced element is drawn outside its box.
<position>where
<position> = [ [ left | center | right ] || [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]? | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ] ]where
<length-percentage> = <length> | <percentage>
Here we see HTML that includes two <img>
elements, each displaying the MDN logo.
<img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> <img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/>
The CSS includes default styling for the <img>
element itself, as well as separate styles for each of the two images.
img { width: 300px; height: 250px; border: 1px solid black; background-color: silver; margin-right: 1em; object-fit: none; } #object-position-1 { object-position: 10px; } #object-position-2 { object-position: 100% 10%; }
The first image is positioned with its left edge inset 10 pixels from the left edge of the element's box. The second image is positioned with its right edge flush against the right edge of the element's box and is located 10% of the way down the height of the element's box.
Specification | Status | Comment |
---|---|---|
CSS Images Module Level 3 The definition of 'object-position' in that specification. | Candidate Recommendation | Initial definition. |
Initial value | 50% 50% |
---|---|
Applies to | replaced elements |
Inherited | yes |
Percentages | refer to width and height of element itself |
Media | visual |
Computed value | as specified |
Animation type | repeatable list of simple list of length, percentage, or calc |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | 31 | 16 | 36 | No | 19
|
10 |
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | 4.4.3 | ? | ? | 36 | 24
|
10 | ? |
object-fit
, image-orientation
, image-rendering
, image-resolution
.
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/object-position