Box
aspect-ratio
aspect-ratio sets the ratio of a box's width to its height. Set only the width and the height follows the ratio. Handy for embedded videos and square thumbnails.
Syntax
auto || <ratio>Preview
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
Presets
Drag the bottom-right corner to resize
Code
.box {
height: auto;
aspect-ratio: 16 / 9;
}Controls
aspect-ratio16 / 9
Width
Height (1 if omitted)
Prefer the natural ratio (auto)
The quick brown fox jumps over the lazy dog. 素早い茶色の狐がのろまな犬を飛び越える。
About
Writing the value
16 / 9: the ratio of width to height. Leaving out the part after/means/ 1, so1.5is the same as3 / 2.auto: no ratio. Images and videos use their natural ratio, and other boxes follow their content. This is the initial value.auto 16 / 9: uses the natural ratio of an image or similar when known, and 16 / 9 until then (for example, while it loads).
When it does nothing
If both width and height are set, the ratio is not used. Leave one of them as auto; that is why the code on this page includes height: auto. Also, when the content does not fit in the ratio's height, the box grows taller to fit it (setting overflow to anything but visible keeps the ratio).