W3C home > Mailing lists > Public > www-style@w3.org > August 2012

Re: [CSS3-Images] Object-fit's behaviour compared to background-size

From: Tab Atkins Jr. <jackalmage@gmail.com>
Date: Mon, 27 Aug 2012 13:13:49 -0700
Message-ID: <CAAWBYDBQyzysc3ASQsKuwgOJ0HmBeoD0_33qzWNPRf+B700AYw@mail.gmail.com>
To: Steve Workman <steve.workman@gmail.com>
Cc: www-style@w3.org, Chris Mills <cmills@opera.com>
On Mon, Aug 27, 2012 at 12:53 PM, Steve Workman <steve.workman@gmail.com> wrote:
> Hi all,
>
> I'm currently writing a polyfill for Object-fit
> [https://github.com/steveworkman/jquery-object-fit] and have been discussing
> the implementation with Chris Mills (cc'd). From Opera's implementation, and
> from my initial understanding of the property, I believed that object-fit
> (cover|contain) would behave identically to background-size (cover|contain)
> because of the identical syntax and very similar way that they are explained
> in their specs. After some discussion, it's clear that unless a height or
> width is specified, object-fit will have no effect on the dimensions of the
> resulting image.
>
> I'm simply wondering why it wouldn't behave as background-size does.
>
> For example, given a parent block-level element with specified width, a
> child image with height and width set to auto and object-fit set to contain
> does not contain the image, instead leaving it at it's natural size. If this
> were a background-image instead, it would re-size to fit the container that
> it has been applied to.
>
> I propose that the spec be amended to provide for times when the
> width/height of the image is set to auto, to behave more like
> background-size.

I'm not sure how you came to this conclusion.  Can you elaborate?

It *sounds* like you believe that object-fit is meant to size <img>
elements inside of other HTML elements.  This is incorrect.  It's
meant to size the image *inside* an <img> element (and other graphical
elements like video; the default UA stylesheet for video is
"background: black; object-fit: contain; object-position: center;",
which achieves the "letterboxing" effect where you get black bars
around videos that have a different aspect ratio than the element).

~TJ
Received on Monday, 27 August 2012 20:14:38 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:58 GMT