W3C home > Mailing lists > Public > www-style@w3.org > February 2014

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

From: Brad Kemper <brad.kemper@gmail.com>
Date: Thu, 6 Feb 2014 09:09:32 -0800
Message-Id: <7DED2EC6-AFA6-42D2-A080-8245AFA40927@gmail.com>
Cc: Edward O'Connor <eoconnor@apple.com>, www-style list <www-style@w3.org>
To: Maciej Stachowiak <mjs@apple.com>
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'.
    
Received on Thursday, 6 February 2014 22:18:43 UTC

This archive was generated by hypermail 2.3.1 : Monday, 2 May 2016 14:39:18 UTC