AWS Amplify - the fastest, easiest way to develop mobile and web apps that scale.
The object-position property is used in conjunction with object-fit property and defines how an element such as a video or image is positioned with X/Y coordinates inside its content-box. This property takes two numerical values, such as 0 10% or 0 10px. In those examples, the first number indicates that the image should be placed at the left of the content box (0), the second that it should be positioned 10% or 10px from the top. It is also possible to use negative values.
The default value for object-position is 50% 50% when using the object-fit property on an image, so that by default all images are positioned in the center of their content box, like so:
img {
object-fit: none;
object-position: 50% 50%; /* default value: image is centered*/
object-position: 0 0; /* positioned top left of the content box */
}Demo
Beneath are a few examples as to how we can manipulate the object-position of an image with the object-fit property set to none. If the content of the image does not fill the content box for whatever reason then the unfilled space will show the element’s background, which can be a color or even a background-image, as in the last example:
See the Pen Object position by Robin Rendle (@robinrendle) on CodePen.
Related Properties
Other Resources
Browser support
| Chrome | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7.1+* | 36+ | 26+ | ? | 4.4.4+ | 8.4+* |
* Support for object-fit but not object-position
function example() {
element.innerHTML = “what the hell?”;
}
The browser support is wrong for Safari, which doesn’t support
object-positionat all.http://caniuse.com/#search=object-position
Thanks Marek, I’ve updated the post with the right info now.
Safari 10 supports object-position:
https://developer.apple.com/library/prerelease/content/releasenotes/General/WhatsNewInSafari/Articles/Safari_10_0.html
(Also, the codepen is a 404 now)
Safari 10 (macOS and iOS) now properly support both
object-fitandobject-position.I’m a bit late here, but I have an amend: third example should say
object-position: 100% 100%(instead of 100% 150%), while fourth one should sayobject-position: 0 100%(instead of 0 150%).No mention that you can use same notation as background-position
‘object-position: left bottom;’
I have a full screen image on my website. I want it to adapt based on the screen resolution/ratio but I have some constrains:
I always have to see the right part of the image (only crop what is
on the left)
I cannot crop the height.
I have tried without any success to use:
text-indent: -100%;
object-position: right;
object-fit: contain;
but no combination works.
Thank you for any help