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.
Code Comparison
✕ Old
8 lines
1.video-wrapper {
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}
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}
✓ Modern
2 lines
1.video-wrapper {
2 aspect-ratio: 16 / 9;
3}
2 aspect-ratio: 16 / 9;
3}
Why the modern way wins
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.
Browser Support
95%
Lines Saved
8 → 2
75% less code
Old Approach
Padding + absolute
56.25% for 16:9
Modern Approach
One property
aspect-ratio: 16/9
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.