Comments on: object-position

By: Steven

Steven — Fri, 11 Sep 2020 16:02:33 +0000

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

By: Ben

Ben — Wed, 15 Jul 2020 13:36:58 +0000

No mention that you can use same notation as background-position
‘object-position: left bottom;’

By: Serban

Serban — Thu, 06 Jul 2017 14:22:55 +0000

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 say object-position: 0 100% (instead of 0 150%).

By: Dan Johnson

Dan Johnson — Mon, 09 Jan 2017 03:36:58 +0000

In reply to Marek. Safari 10 (macOS and iOS) now properly support both object-fit and object-position.

By: Stian Jensen

Stian Jensen — Tue, 14 Jun 2016 15:09:44 +0000

In reply to Marek.

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)

By: Robin Rendle

Robin Rendle — Fri, 29 Jan 2016 11:02:25 +0000

In reply to Marek. Thanks Marek, I’ve updated the post with the right info now.

By: Marek

Marek — Fri, 29 Jan 2016 10:31:27 +0000

The browser support is wrong for Safari, which doesn’t support object-position at all.
http://caniuse.com/#search=object-position

By: Name

Name — Wed, 26 Aug 2015 05:20:21 +0000

function example() {
element.innerHTML = “what the hell?”;
}