object-position
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.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 32 | 79 | 36 | 10 | 32 | 10 | |
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)
Notes 3 item(s)
Limitation
- This browser only partially implements this feature
Removed
- This feature was removed in a later browser version (79)
Implementation note
- Only supported for `<img>` elements.
Syntax
CSS
.avatar {
object-fit: cover;
object-position: top center;
}
.hero-image {
object-fit: cover;
object-position: 50% 30%;
}Live demo
Use cases
-
Using object-position
The object-position CSS property specifies the alignment of the selected replaced element's contents within the element's box.
Cautions
- May not be supported in older browsers.
Accessibility
- Make sure visual changes are conveyed appropriately to assistive technology.