Re: [css-images] Overconstrained image sizing and preserving aspect ratio: the object-sizing property

On Wed, Feb 5, 2014 at 10:26 AM, Edward O'Connor <> wrote:
>>> In Alice's case, what she really wants is a new property that
>>> switches to another sizing algorithm that does the aspect-ratio
>>> preserving effect of `object-fit: contain' at layout time instead of
>>> at paint time. Consider this <img> of Bob's:
>>> <img src=5x3.jpg alt="Image with an intrinsic aspect ratio of 5 by 3"
>>>      width=5000 height=3000>
>>> The image has an aspect ratio of 5:3. Alice wants to have CSS that
>>> favors the intrinsic aspect ratio of the image. Something like this
>>> would do the trick:
>>> img {
>>>   max-width: 100%;
>>>   max-height: 100%;
>>>   object-sizing: prefer-intrinsic;
>>> }
>> I agree with this use-case, but think it should be done by an explicit
>> aspect-ratio property, which can choose to take its value from an
>> object's intrinsic aspect ratio.
> One (of the only things) that I like about naming it `object-<foo>' is
> that it parallels the naming of object-fit and object-position, so it's
> easier for authors to understand that it only applies to replaced
> elements. How about `object-aspect{,-ratio}'? Or do you want an
> `aspect-ratio' property that applies to non-replaced elements too?

Why should this only apply to replaced elements?  Sorry if it wasn't
clear, but I definitely intend this to apply to all elements; people
ask for aspect ratios on normal elements fairly regularly, and today
do weird hacks (like percentage padding-bottom) to achieve it.

I mean, we can certainly start with keywords that only do something
useful for replaced elements.  But I want to end up with aspect ratio
just being a thing that all elements can do.

>> Would it be acceptable to solve this case with a simple "aspect-ratio:
>> 2 / 1;" on Alice's side? Otherwise, another value could be added to
>> 'aspect-ratio' that derives an aspect ratio explicitly from the
>> 'width' and 'height' properties, as you describe.
> I don't mind the idea of being able to explicitly specify a numeric
> aspect ratio in the CSS, but I suspect that doesn't handle this case
> sufficiently so yeah, I think we'd need another value as well.

Can you go into more detail why you don't think an explicit
aspect-ratio solves this?  I'm not opposed to the "figure it out from
width/height" value, I'd just like some better justification for
adding it.


Received on Wednesday, 5 February 2014 19:03:23 UTC