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.
2 aspect-ratio: 16 / 9;
3}
2 position: relative;
3 padding-top: 56.25%;
4}
5
6.video-wrapper > * {
7 position: absolute;
8 top: 0; left: 0;
9 width: 100%; height: 100%;
10}
Browser Support for aspect-ratio
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Your first month is free
Managed WordPress hosting for faster sites.
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.