The object-position CSS property determines the alignment of the selected element inside its box.
/* <position> values */ object-position: 100px 50px; /* Global values */ object-position: inherit; object-position: initial; object-position: unset;
| 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 |
Syntax
Values
<position>- From one to four values that define the 2D position of the element. Relative or absolute offsets can be used. Note that the position can be set outside of the element's box.
Formal syntax
<position>where
<position> = [[ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ center | [ left | right ] <length-percentage>? ] && [ center | [ top | bottom ] <length-percentage>? ]]where
<length-percentage> = <length> | <percentage>
Example
HTML content
<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"/>
CSS content
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%;
}
Output
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Image Values and Replaced Content Module Level 4 The definition of 'object-position' in that specification. |
Working Draft | The from-image and flip keywords have been added. |
| CSS Image Values and Replaced Content Module Level 3 The definition of 'object-position' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 31.0 | 36 (36) | No support | 11.60-o 19.0 |
10.0 |
| Feature | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 4.4.4 | 36 (36) | No support | 11.5-o 24 |
No support |
[1] WebKit Nightly fixed in bug 122811.
See also
- Other image-related CSS properties:
object-fit,image-orientation,image-rendering,image-resolution.