This aspect-ratio will be used in the calculation of auto sizes and some other layout functions.
This property creates boxes that maintain proportional dimensions where the height and width of a box are calculated automatically as a ratio. The idea is that you can divide one value by another on this property and the calculated value ensures a box stays in that proportion. This property helps to size elements consistently, so the ratio of an element stays the same as it grows or shrinks.
auto: the default value, which specifies that the element has no preferred aspect ratio and should size itself as it normally would. Therefore, replaced elements, like images with an intrinsic aspect ratio, use "that" aspect ratio.
ratio: two positive numeric values separated by a forward slash (/) with or without space around them, targeting the width and height of the element. In the case of a single value, the second value is considered to be 1. Size calculations involving preferred aspect ratio work with the dimensions of the box specified by box-sizing.
initial: applies the property's default setting, which is "auto".
inherit: adopts the aspect-ratio value of the parent.
unset: removes the current aspect ratio from the element.
syntax examples
/* Keyword values */
aspect-ratio: auto; /* default */
/* Ratio values */
aspect-ratio: 1 / 1; /* width and height are equal proportion */
aspect-ratio: 2 / 1; /* width is twice the height*/
aspect-ratio: 1 / 2; /* width is half the height */
aspect-ratio: 16 / 9 /* typical video aspect ratio */
aspect-ratio: auto 4 / 3; /* width:height, unless it's a replaced element */
/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: unset;
If both auto and a "ratio" are specified together, the preferred aspect ratio is the specified ratio of width divided by height, unless it is a "replaced element" with an intrinsic aspect ratio, in which case that aspect ratio is used instead.
Replaced elements - like images or videos - already have an intrinsic aspect ratio; therefore when they grow or shrink, they maintain their aspect ratio, but non-replaced elements don't have that luxury and sometimes you need that behavior for them.
Some examples where aspect-ratio becomes handy, are
responsive iframes
hero images
consistency in a grid layout
It's ignored in some situations:
when both "width" and "height" are declared on the element. If the element already has both a "width" and "height", those get used instead of aspect-ratio. It requires both properties to override aspect-ratio; setting either "height" or "width" alone will not break the element's aspect ratio.
when content breaks out of the ratio. If you have an element with an aspect ratio and the content is so long that it forces the element to expand, then the element will expand. And if the element expands, its dimensions change and, thus, no more aspect ratio.
when it “loses” to min-* and max-* properties. All of the min-* and max-* properties typically battle "width" and "height" for supremacy in the war over "box model" calculation. If we set both a min-* or max-* property on the same element as aspect-ratio and they “win” over "width" or "height", then those will override aspect-ratio.
