A better way to handle Aspect Ratios
A framework for the choices that shape your codebase.
Stop second-guessing your architecture, stack, and scope choices. Get the framework engineers use to make decisions they don't regret.
A Lightweight, Premium SEO Analyzer
Stop guessing if your web pages are optimized and start seeing the data that matters.
Hey everyone,
We’ve all had to do it. You need a responsive 16:9 video container, so you reach for that weird math trick:
/* The "Old Math" Way */
.video-container {
width: 100%;
height: 0;
padding-bottom: 56.25%; /* Wait, why is height controlled by padding? */
position: relative;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}It works, but it’s a nightmare to explain to a junior dev, and it requires extra HTML just to hold the shape. Not anymore.
The Modern Way: aspect-ratio
We now have a dedicated CSS property that does exactly what it says on the tin. No wrappers, no absolute positioning, and no magic percentage math.
/* The Modern Way */
.video-card {
width: 100%;
aspect-ratio: 16 / 9;
/* Works for anything! */
object-fit: cover;
}Why this is a win:
- No “Ghost” Wrappers: You can apply this directly to an
<img>,video>, or<iframe>. - Readable Code: 16 / 9 tells the next developer exactly what the intent is. 56.25% tells them nothing.
- Flexibility: It plays perfectly with CSS Grid and Flexbox. If you change the width, the height adjusts instantly to maintain the ratio.
Browser Support
This is a rock-solid Baseline feature. It has been supported in all major browsers since 2021/2022, so it is 100% safe for every project you’re working on right now.
Happy coding!
Marko