Intent to implement: "object-fit" & "object-position" CSS properties

235 views
Skip to first unread message

Daniel Holbert

unread,
Sep 10, 2014, 8:03:54 PM9/10/14
to dev-pl...@lists.mozilla.org
Summary: The 'object-fit' and 'object-position' properties allow web
developers to customize how a replaced element's content gets scaled and
positioned to fit the element's content-box. (i.e. how an image or a
video gets scaled/positioned inside of an <img>/<video> tag) The
'object-fit' property lets authors request e.g. 'contain' or 'cover'
behavior (or several other behaviors), and 'object-position' lets the
them specify how the content should be aligned when there's extra space
available. Together, these properties provide similar functionality to
the preserveAspectRatio attribute in SVG.

Bug: https://bugzilla.mozilla.org/show_bug.cgi?id=624647

Link to standard:
http://dev.w3.org/csswg/css-images-3/#the-object-fit
http://dev.w3.org/csswg/css-images-3/#the-object-position

Platform coverage: All

Estimated or target release: Firefox 35

Preference behind which this will be implemented:
layout.css.object-fit-and-position.enabled


NOTE: Last night, I landed preffed-off support for these properties,
*just in CSS* (from bug 1055285) -- i.e. layout doesn't make use of them
yet. (So, in tomorrow's nightly with the pref toggled, the properties
can be parsed and can be inspected via getComputedStyle(), but they have
no effect on rendering for now.)

~Daniel

Jonas Sicking

unread,
Sep 10, 2014, 8:26:10 PM9/10/14
to Daniel Holbert, dev-platform
On Wed, Sep 10, 2014 at 5:03 PM, Daniel Holbert <dhol...@mozilla.com> wrote:
> Summary: The 'object-fit' and 'object-position' properties allow web
> developers to customize how a replaced element's content gets scaled and
> positioned to fit the element's content-box. (i.e. how an image or a
> video gets scaled/positioned inside of an <img>/<video> tag) The
> 'object-fit' property lets authors request e.g. 'contain' or 'cover'
> behavior (or several other behaviors), and 'object-position' lets the
> them specify how the content should be aligned when there's extra space
> available. Together, these properties provide similar functionality to
> the preserveAspectRatio attribute in SVG.

Yes!

Do we have a sense for how supportive other browser vendors are of
these properties? And how stable we can expect these properties to be
in the spec?

/ Jonas

/ Jonas

Daniel Holbert

unread,
Sep 10, 2014, 8:41:55 PM9/10/14
to Jonas Sicking, dev-platform
On 09/10/2014 05:26 PM, Jonas Sicking wrote:
> Yes!
>
> Do we have a sense for how supportive other browser vendors are of
> these properties?

Supportive! I haven't tested other browsers' implementations yet, but I
do know that it's been implemented in Blink, and it was apparently
undergoing code-review in WebKit a year ago, so it's probably fixed
there too, by now. More details here:
http://lists.w3.org/Archives/Public/www-style/2013May/0536.html

Note the "No info" on Microsoft there -- several months later in that
thread, a Microsoft representative said they "haven't committed to its
implementation"[1], but in a later message, they said "We don't have a
problem with the properties. From our early evaluation, the approach
makes sense. If the other implementers don't have objections to
un-prefixing these properties, neither do we."[2]

[1] http://lists.w3.org/Archives/Public/www-style/2013Oct/0005.html
[2] http://lists.w3.org/Archives/Public/www-style/2013Oct/0142.html

> And how stable we can expect these properties to be
> in the spec?

Pretty stable, I think. There's been no mention of the properties in
subject-lines on www-style since that ^ linked thread finished up in
October of last year (aside from one suggestion of an additional
object-fit value, which didn't get a response). I take that as an
indication that things aren't really changing.

~Daniel

Jonas Sicking

unread,
Sep 10, 2014, 9:20:16 PM9/10/14
to Daniel Holbert, dev-platform
On Wed, Sep 10, 2014 at 5:41 PM, Daniel Holbert <dhol...@mozilla.com> wrote:
> On 09/10/2014 05:26 PM, Jonas Sicking wrote:
>> Yes!
>>
>> Do we have a sense for how supportive other browser vendors are of
>> these properties?
>
> Supportive!

Awesome. Let's do it!

/ Jonas

Karl Dubost

unread,
Sep 10, 2014, 9:21:38 PM9/10/14
to Daniel Holbert, dev-pl...@lists.mozilla.org

Le 11 sept. 2014 à 09:03, Daniel Holbert <dhol...@mozilla.com> a écrit :
> Summary: The 'object-fit' and 'object-position' properties allow web
> developers to customize how a replaced element's content gets scaled and
> positioned to fit the element's content-box. (i.e. how an image or a

Please yes!
It was in the past implemented in Opera Presto in 2011(!) and was very useful.
https://dev.opera.com/articles/css3-object-fit-object-position/

According to http://caniuse.com/#feat=object-fit
Implemented in Chrome since 31 and Opera Blink since 23. (it was before in Opera 12).
Support for object-fit in iOS 8.

According to http://status.modern.ie/objectfitandobjectposition?term=object-fit
Under Consideration by IE team.


--
Karl Dubost, Mozilla
http://www.la-grange.net/karl/moz

Karl Dubost

unread,
Sep 10, 2014, 9:29:16 PM9/10/14
to Daniel Holbert, dev-pl...@lists.mozilla.org

Le 11 sept. 2014 à 10:21, Karl Dubost <kdu...@mozilla.com> a écrit :
> Support for object-fit in iOS 8.

object-position on WebKit OPEN
https://bugs.webkit.org/show_bug.cgi?id=122811

object-fit on WebKit RESOLVED FIXED
https://bugs.webkit.org/show_bug.cgi?id=52040

yio...@gmail.com

unread,
Oct 9, 2014, 5:39:26 AM10/9/14
to
Which version of the official opening?

在 2014年9月11日星期四UTC+8上午8时03分54秒,Daniel Holbert写道:

Daniel Holbert

unread,
Oct 9, 2014, 2:31:25 PM10/9/14
to yio...@gmail.com, dev-pl...@lists.mozilla.org
On 10/09/2014 02:39 AM, yio...@gmail.com wrote:
> Which version of the official opening?

It's looking like "object-fit" & "object-position" will be released in
Firefox 36, if that's what you're asking.

You can follow along on the bug page:
https://bugzilla.mozilla.org/show_bug.cgi?id=624647

This is currently blocked on "image-rendering: pixelated" support, which
is required for good, interoperable regression-tests for this feature.
That'll be done soon; I'm working on that feature here:
https://bugzilla.mozilla.org/show_bug.cgi?id=856337
https://bugzilla.mozilla.org/show_bug.cgi?id=1072703

Thanks,
~Daniel

Daniel Holbert

unread,
Nov 14, 2014, 7:36:25 PM11/14/14
to dev-pl...@lists.mozilla.org
Here's the intent to ship thread, for reference:
https://groups.google.com/forum/#!topic/mozilla.dev.platform/DK_AyuGfFhg

rohitpa...@gmail.com

unread,
Aug 31, 2016, 8:24:17 AM8/31/16
to
Why this is marked as abuse? It has been marked as abuse.
Report not abuse


You article is awesome about object-fit and object-position

Please check my article and tell me how do i improve it
http://seowebsitedesigning.com/know-about-css-object-fit-and-position-properties/
Reply all
Reply to author
Forward
0 new messages