The object-position defines an offset for an image or video.
The effect is that the image appears offset in its own container.
It accepts both positive and negative values.
An image positioned inside its content box using object-position.
Original Image:
<style>
.image-position {
border: 2px solid gold;
object-fit: none;
object-position: 150px 100px;
}
</style>
<img src="/img/css/van-gogh-strawhat.jpg"
class="image-position">
<p>Original Image:</p>
<img src="/img/css/van-gogh-strawhat.jpg"
style="border:2px solid gold">
Tip: object-position is commonly used
together with object-fit.
object-position: position | initial | inherit;
| Value | Description |
|---|---|
position |
Sets the image or video position inside its content box. Use keyword values: left, right, and center, or
any other CSS length value, such as, px, %, em, and others. Negative values are accepted.
|
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This table shows when object-position support started for each browser.
 Chrome
|
31.0 | Nov 2013 |
 Firefox
|
36.0 | Feb 2015 |
 IE/Edge
|
16.0 | Sep 2017 |
 Opera
|
19.0 | Jan 2014 |
 Safari
|
10.0 | Sep 2016 |
