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.
It is documented as part of the CSS Box Sizing specification.
Syntax
/* Usage Example */
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
/* height is calculated automatically */
}
/* Syntax */
aspect-ratio: auto;
/* Global values */
aspect-ratio: inherit;
aspect-ratio: initial;
aspect-ratio: revert;
aspect-ratio: revert-layer;
aspect-ratio: unset;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.
88+
89+
15+
88+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more