Easily manage projects with monday.com
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-position
at 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-fit
andobject-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%).