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

Hi Tab,

I 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;
>> }

You replied:

> 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?

>> But there's a related case that suggests we need another value for
>> this new property. Consider this <img> of Bob's:
>>
>> <img src=5x3.jpg alt="Image with an intrinsic aspect ratio of 5 by 3"
>>      width=2000 height=1000>
>>
>> The image has an intrinsic aspect ratio of 5:3, but Bob has specified
>> a width and height that produce an aspect ratio of 2:1. Alice might
>> want to have CSS that favors the intrinsic aspect ratio of the image
>> asset, or she might want to have CSS that favors the aspect ratio
>> implicitly specified by the author. This case is different from the
>> Default Sizing Algorithm because the author-supplied width and height
>> are not respected *as widths and heights* but instead only as the
>> source of an aspect ratio.
>
> 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.


Thanks,
Ted

Received on Wednesday, 5 February 2014 18:27:05 UTC