- From: Brad Kemper <brad.kemper@gmail.com>
- Date: Thu, 6 Feb 2014 09:09:32 -0800
- To: Maciej Stachowiak <mjs@apple.com>
- Cc: Edward O'Connor <eoconnor@apple.com>, www-style list <www-style@w3.org>
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