This section is non-normative. When creating a layout for your site, there are times where you want to constrain a box to a specific aspect ratio without actually creating a fixed box. This specification introduces the aspect-ratio property which allows you to do this.
1.1. Aspect based sizing: the aspect-ratio property
|Value:||<number> | none|
|Applies to:||block level elements|
|Computed value:||same as specified value|
|Canonical order:||per grammar|
Note: The term "min or max constraints" refers to min-width, max-width, min-height, and max-height, whichever is appropriate for the dimension in question.
The aspect-ratio property controls the resolution of underspecified values for the width and height properties of elements in CSS, such that the ratio of the inline-size and 'block-size is a specific value.
For elements in in-flow, width or height are underspecified if the computed values of width/height for the element are auto and the element is not a replaced element. For out-of-flow elements, width is underspecified if the computed value for width on the element is auto and the computed values of left or right are auto; height is underspecified if the computed value for height on the element is auto and the computed values of left or right are auto.
What about replaced elements?
The <number> in the value of the property must be greater than zero. If it is not, it is a syntax error.
If aspect-ratio is none, it must have no effect.
If aspect-ratio is not none, but neither width nor height are underspecified for the element, aspect-ratio must have no effect.
Brad Kemper points out that it may be better for back-compat to have aspect-ratio override in this case, just ignoring the block-size dimension. This would let someone specify a "default" ratio via an explicit width/height, and have aspect-ratio take over to ensure it actually maintains the desired ratio.
- If the element’s block-size is underspecified and the inline-size is not, then the used value of the element’s block-size must be the result of dividing the element’s inline-size by the aspect-ratio. If this would cause the element’s block-size to be in violation of a min or max constraint, the block-size must instead be the value required by those constraints.
- If the element’s inline-size is underspecified and the block-size is not, then the used value of the element’s inline-size must be the result of multiplying the element’s block-size by the aspect-ratio. If this would cause the element’s inline-size to be in violation of a min or max constraint, the inline-size must instead be the value required by those constraints.
If both the inline-size and block-size are underspecified, first resolve the inline-size of the element normally, then follow these steps:
- Attempt to set the used value of the element’s block-size to the result of dividing the element’s inline-size by the aspect-ratio.
- If the previous step would cause the element’s block-size to be in violation of a min or max constraint, then instead set the element’s block-size to the value required by those constraints, then attempt to set the used value of the element’s inline-size to the result of multiplying the element’s block-size by the aspect-ratio.
If the previous step would cause the element’s inline-size to be in violation
of a min or max constraint, then instead ignore the aspect-ratio property on
For example, given an element with
width:auto; height:auto; aspect-ratio: calc(2/1); max-height: 200px; in a 500px wide container, the element would first be set to 500px wide, then aspect-ratio would naively set the height to 250px, which is in violation of the max-height constraint. Instead, the element’s height becomes 200px and the width is set to 400px. If the element additionally had
min-width: 450px, aspect-ratio would be completely ignored, as there’s no way to satisfy it.
Note: This property take a single number as the ratio value. However, several common ratios are usually expressed as fractions or explicit ratios, such as "16 by 9". These can be easily expressed using the
Note: Videos, in particular, often do not exactly match a 4:3 or 16:9 ratio, even if they are advertised as such, because they are encoded with non-square pixels. As such, setting a <video> element to one of those ratios may end up with the element’s ratio not quite matching the content’s ratio. However, the default style for <video> in HTML (using the object-fit property) will letterbox the content, so it’s not scaled in an ugly fashion.