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

On Thu, Apr 25, 2013 at 5:51 PM, Sam L'ecuyer <sam@cateches.is> wrote:
> Hi All,
>
> Currently, unless all images are served from the back-end in the correct aspect ratio, displaying images with a fixed aspect ratio on the page is painful.  A common solution to ensuring all images on the page are in 16x9 is with the following:
>
> figure {
>         height: 0;
>         padding-bottom: 56.5%
>         overflow: hidden;
> }
>
> figure img {
>         position: absolute;
> }
>
> However, if the figure doesn't have a width of 100%, this messes up spacing of elements around it.  For example:
>
> .headlineWithFigure {
>         width: 100%;
> }
>
> .headlineWithFigure figure {
>         max-width: 100px;
> }
>
> This will result in there being a padding on the bottom of the figure that's 56.5% of the entire .headlineWithFigure, not the figure itself.  This pushes all elements below it down more than expected.

One way to work around this, by the way, is to double-wrap the image.
The outer block can have its width respond to the rest of the page and
other rules, while the inner block uses the padding trick.  The
percentages are now relative to the outer block, rather than the width
of the context.

> 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 have an old proposal for this on my blog
<http://www.xanthir.com/blog/b4810>.  It's broken in some aspects, but
I'm aware of how to fix them.  I plan to try and get this into the
Sizing spec <http://dev.w3.org/csswg/css-sizing>, either in this level
or the next.

~TJ

Received on Friday, 26 April 2013 21:36:01 UTC