CSS aspect-ratio Property (No Padding Hack)
Aspect ratios without the padding hack
The old trick used padding-top: 56.25% and nested absolute positioning. aspect-ratio does it in one declaration.
.video-wrapper { position: relative; padding-top: 56.25%;}.video-wrapper > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}.video-wrapper { aspect-ratio: 16 / 9;}aspect ratio Browser Support
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.
No math
16/9, 4/3, 1/1. No percentage math or nested wrappers.
Single element
One container, one property. Content can sit inside without absolute positioning.
Any ratio
Use any ratio you need. Works with flex and grid too.
How it works
The classic trick was a wrapper with padding-top: 56.25% (100/16*9 for 16:9) and position: relative, then a child with position: absolute; inset: 0 to fill it. Two selectors, magic numbers, and the child had to be taken out of flow.
aspect-ratio: 16 / 9 on the container does the job. The element keeps that ratio as width changes. No padding hack, no absolute child, no percentage math.