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

On Feb 6, 2014, at 9:09 AM, Brad Kemper <brad.kemper@gmail.com> wrote:

> On Feb 5, 2014, at 7:26 PM, Maciej Stachowiak <mjs@apple.com> wrote:
>> 
>> 
>>> On Jan 31, 2014, at 2:42 PM, Edward O'Connor <eoconnor@apple.com> wrote:
>>> 
>>> 
>>> I couldn't come up with a property name or property value names that
>>> a) make it sufficiently clear that this is really about aspect-ratio,
>>> and b) aren't way too long. Bikeshedding is very welcome.
>> 
>> aspect-ratio: prefer-intrinsic;
> 
> I would call that 'aspect-ratio: auto'. For elements without an intrinsic ratio, 'auto' would be the same as 'none'. The default value would be 'none'. Other values are decimals between 0 and 1 (width/height). The intrinsic value for 'auto' would be determined first by 'width' and 'height' attributes in the markup. If they were not both present, then it is determined by the image data.
> 
> I think the following would satisfy the use case:
> 
> img {
>    max-width: 100%;
>    max-height: 100%;
>    aspect-ratio: auto;
> }
> 
> That would keep the image contained in its parent, without distorting it. If you wanted the image to always be a square, you would use 'aspect-ratio: 1'.

My main goal was to mention aspect ratio in the name somewhere. On that basis, your proposal would also work. However, I find it confusing for a few reasons:

- 'auto' is not the default
- 'none' doesn't mean no aspect ratio - everything has an aspect ratio
- It's impossible to figure out what 'auto' or 'none' mean from the names

Specifically, in your example above, it's not at all clear to me how one would infer that 'auto' means to use an image's intrinsic size rather than the specified size from max-width and max-height.

Also, conflating width/height attributes with intrinsic size is problematic. 'width' and 'height' content attributes are defined as presentational attributes that produce the corresponding CSS properties (if I recall correctly; maybe I'm wrong). Treating CSS property values differently in the sizing algorithm based on where in the cascade order they were specified.

Regards,
Maciej

Received on Thursday, 6 February 2014 22:48:02 UTC