aspect-ratio
The aspect-ratio property sets a preferred width-to-height ratio for an element's box.
Syntax
aspect-ratio: <width> / <height>; /* e.g. 16 / 9 */
Examples
.video {
width: 100%;
aspect-ratio: 16 / 9;
}
.avatar { aspect-ratio: 1; width: 64px; }
Output
Renders a responsive 16:9 video frame and a perfectly square avatar.
Notes
Eliminates the old padding-top percentage hack and reserves space to prevent layout shift. If both width and height are set, aspect-ratio is ignored. Combine with object-fit for media.
Browser & runtime support
| Environment | Since version |
|---|---|
| chrome | 88 |
| firefox | 89 |
| safari | 15 |
| edge | 88 |