W3C home > Mailing lists > Public > www-style@w3.org > April 2013

Re: [css-images] a proposal for intrinsic aspect ratios

From: Anselm Hannemann <info@anselm-hannemann.com>
Date: Sat, 27 Apr 2013 14:22:21 +0200
To: "Tab Atkins Jr." <jackalmage@gmail.com>
Cc: Sam L'ecuyer <sam@cateches.is>, www-style list <www-style@w3.org>
Message-ID: <86B4556F03A44C0893F3D483B3DC2B92@anselm-hannemann.com>
On Friday, 26. April 2013 at 23:35, Tab Atkins Jr. wrote:
> > An easier solution would be to specify
> >  
> > .headlineWithFigure figure {
> > max-width: 100px;
> > aspect-ratio: 56.5%; /* now it will always be in 16x9 */
> > object-fit: cover;
> > }
> >  
> > That way you could even specify different aspect-ratios in different media queries and the page will look as expected even when the images are user-submitted and the sizes are different to control server-side.
> >  
> > This would *not* change the default sizing algorithm specified in § 5.3.1 because the it would continue to use the intrinsic aspect ratio, though the definition of intrinsic dimensions in § 5.1 should change to something like "CSS does not define how the intrinsic dimensions are found in general, unless they are defined with aspect-ratio rule".
> >  
> > ---
> >  
> > Name: aspect-ratio
> >  
> > Value: '<length>x<length>' | <percentage>
> >  
> > Initial: n/a
> >  
> > Applies to: all elements that are sized
> >  
> > Animatable: no
> >  
> > The 'aspect-ratio' property specifies the intrinsic aspect ratio of an element. The value should be either a percentage, which represents a ratio of the height to width, or as an explicit ratio of two positive integers.
> >  
> > Example:
> >  
> > aspect-ratio: 56.5%; /* 16x9 */
> > aspect-ratio: '16x9';
> > aspect-ratio: '4x5'; /* Now it's taller than it is wide */
> >  
>  
>  

I do like this approach but specifying percentages is hard, so I prefer using ratios like `16x9` or similar. Basically there also should be a default value `preserve` which just preserves the aspect-ratio.
And for instance why shouldn't it be animatable? I think it should be. There could be a slide or dissolve effect for that use case that may appear on change events at some time in future. But I don't have a strong opinion on that specific thing.

-Anselm 
Received on Saturday, 27 April 2013 12:22:42 UTC

This archive was generated by hypermail 2.3.1 : Saturday, 27 April 2013 12:22:46 UTC