aspect-ratio
Sets a preferred ratio for an element's width and height, ensuring it maintains a specific shape (like square or widescreen) even as it resizes.
Quick example
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
/* height is calculated automatically */
}Quick facts
Initial value
autoInherited
No
Applies to
all elements except inline boxes and internal ruby or table boxes
Animation type
byComputedValueType
Values
auto aspect-ratio Browser Support
Widely available Since 2021 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Safe to use without fallbacks.
88+
89+
15+
88+