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

[Daniel Holbert]

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]

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]

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]

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]

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]

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]

Which version of the official opening?

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

[Daniel Holbert]

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]

Here's the intent to ship thread, for reference:
https://groups.google.com/forum/#!topic/mozilla.dev.platform/DK_AyuGfFhg

[rohitpa...@gmail.com]

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/