Re: [css3-images] Reintroduce object-fit: none

Tab Atkins Jr. <jackalmage@gmail.com> skreiv Tue, 24 May 2011 02:06:39
+0200

> On Thu, Jan 27, 2011 at 2:35 PM, fantasai  
> <fantasai.lists@inkedblade.net> wrote:
>> On 01/27/2011 09:18 AM, Tab Atkins Jr. wrote:
>>
>>> Ok, so I'm hearing some good justifications for both 'cover' and
>>> 'none' (and I think 'scale-down' has similar nice justifications).
>>
>> I'm still unsure about 'none'. The use case Leif has given is
>> panning the image, and in that case you'd probably want more than
>> just the ability to pan at 100% zoom level. If that's the use case
>> we're addressing, we should add percentages or something.

> I'm trying to wrap up this issue. There are a few aspects of the
> property that need adjustment:
>
> 1) replaced elements should *always* clip their content.  This is a
> non-controversial change; I just need to adjust some wording and
> change the example image.
>
> 2) Add the 'scale-down' value.  The use-case for this (image viewer
> that wants to scale the image to the viewing area if it's too large,
> but display it at the natural size if it's small enough to fit in the
> viewing area) seems appropriate, and the implementation for this value
> seems easy.

Good!

> 3) Add the 'none' value.  The stronger use-case here seems to be
> panning a "window" over a portion of a larger image, a la Google Maps.
>  A somewhat weaker imo use-case is vertically centering an image; I
> think this should be addressed by a more general centering mechanism
> like Flexbox.

We already have a more general centering/positioning mechanism:
'object-position', implemented by HP and Opera. However, for it to work
without scaling the image, we need 'object-fit: none'. 'scale-down' comes
close, but doesn't address cases such as the following:

(From my former life as a web developer for www.neitileu.no:) You are
writing style sheets for a site with many content producers. The site
includes a fixed-size banner, but after a while you want to adjust the
design and shave a few pixels off the banner. But you want to avoid
scaling, as that will deform and blur or alias the text, and this is more
important than losing a few edge pixels. A demo is at [0].

Another case is a screenshot gallery, similar to Opera's speed dial
feature: You have a series of screenshots for the user to choose from,
presented in thumbnail form. You want the screenshots unscaled but evenly
sized. A screenshot from my speed dial is at [1].

In both these cases 'object-fit: none' (optionally combined with
'object-position') allows you to disable scaling and get the effect you
want. Disabling scaling is useful for at least two classes of images: (1)
those containing graphics or text (as opposed to plain photos) and created
to a specific size, and (2) screenshots, where the unscaled pixels are
significant.

For the record it is currently possible to work around this issue with
extra markup (outer <div> with 'overflow: hidden'), and that's exactly
what I did, time after time, when I was a web dev.

> 4) (optional) Add percentages as a possible value, similar to
> background-size, so you can arbitrarily size the content.  'fill'
> would be equivalent to '100% 100%'.

I wouldn't oppose this, but it's not about 'fitting', so the property
would bear renaming. Sounds like it would be useful but I don't have a
concrete use case.

[0]  
http://people.opera.com/lstorset/demos/object-fit/dont-liek-scaling/deformed-vs-object-fit-none.html
[1]  
http://people.opera.com/lstorset/demos/object-fit/dont-liek-scaling/speed-dial.png
([0] and [1] will also be sent to www-archive.)

-- 
Leif Arne Storset
Core Technology Developer, Opera Software
Oslo, Norway

Received on Tuesday, 24 May 2011 11:37:02 UTC