[css-images] a proposal for intrinsic aspect ratios

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.

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 */

---

Feedback & thoughts are always appreciated.

-sam

Received on Friday, 26 April 2013 00:52:14 UTC