A better way to handle Aspect Ratios

A better way to handle Aspect Ratios
March 07, 2026 | Read time: 3 minutes

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.

Download free eBook

A Lightweight, Premium SEO Analyzer

Stop guessing if your web pages are optimized and start seeing the data that matters.

Start today. It's free!

Sponsor this newsletter to reach 9,000+ active developers

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