Lesson 8 of 30

The aspect-ratio Property

Q: How would you make a video embed scale responsively with its container's width while always keeping a 16:9 ratio? And how would you have done this before aspect-ratio existed?

A strong answer covers: Gives the modern answer: aspect-ratio: 16 / 9 combined with width: 100%, no JavaScript or media queries needed; Can describe the older padding-top percentage hack and explain why it worked — percentage padding-top resolves against the parent's width; Notes that the old hack needed an extra pseudo-element or wrapper purely to hold the ratio, which aspect-ratio eliminates; Mentions that aspect-ratio is a preferred ratio, not an absolute one — explicit width/height or overflowing content can still override it.

Before aspect-ratio existed, holding an element to a fixed width-to-height ratio meant exploiting the fact that padding percentages resolve against width. One property replaces that entire hack.

10 min read

Check your understanding

Every option explains itself — why the right one is right, and why each wrong one is wrong. Miss one and it comes back later on a spaced-repetition schedule.

Question 1 of 3

Which of these is a valid, correct use of the aspect-ratio property?

aspect-ratio must always be written as two numbers separated by a slash, a single number is invalidaspect-ratio: 1; — valid, and equivalent to a 1 / 1 ratioaspect-ratio only accepts percentage values, matching the old padding-top hack's syntax

Stuck? Ask the AI tutor

Hints without spoilers, and a plain explanation of why a wrong answer was wrong — answered only from this lesson. Free account, no card.

Interview questions on The aspect-ratio Property

What interviewers actually ask about this, and what a strong answer has to cover.

How would you make a video embed scale responsively with its container's width while always keeping a 16:9 ratio? And how would you have done this before aspect-ratio existed?

A strong answer covers

Gives the modern answer: aspect-ratio: 16 / 9 combined with width: 100%, no JavaScript or media queries needed
Can describe the older padding-top percentage hack and explain why it worked — percentage padding-top resolves against the parent's width
Notes that the old hack needed an extra pseudo-element or wrapper purely to hold the ratio, which aspect-ratio eliminates
Mentions that aspect-ratio is a preferred ratio, not an absolute one — explicit width/height or overflowing content can still override it

Likely follow-ups

If this embed also needs to show a fallback thumbnail image before the video loads, does aspect-ratio alone prevent layout shift, or do you need something else too?
What happens to the ratio if the box also has a min-height set that's taller than the ratio would produce?

Practice these with the AI interviewer →

The plain-language idea

Plenty of UI needs to keep a fixed width-to-height ratio no matter how wide it renders — a video embed, a responsive image placeholder, a square avatar. CSS had no direct way to say "keep this box at 16:9" until aspect-ratio shipped, so developers reached for a genuinely strange workaround: the padding-top percentage hack.

That hack exploits a specific, easy-to-forget quirk: padding-top (and padding-bottom) expressed as a percentage resolves against the parent's width, not its height, even though padding-top is conceptually a vertical measurement. So padding-top: 56.25% on an empty pseudo-element forces a box that's always 16:9 (9 ÷ 16 = 0.5625), because as the box's width changes, its height — driven by that width-relative padding — changes to match. It works, but it's an accidental side effect of a specification quirk being repurposed for something padding was never meant to do, wrapped in extra markup or a pseudo-element just to hold the ratio.

aspect-ratio says directly what the hack achieved indirectly:

.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.avatar {
  aspect-ratio: 1;
  width: 3rem;
}

No pseudo-element, no percentage math, no padding side effect — the box computes its own height (or width) from the ratio and whichever dimension is set.

See it in a real thing: a responsive video embed

An embedded video needs to scale with its container's width while never distorting. With aspect-ratio: 16 / 9 and width: 100%, the element's height is derived automatically at every viewport size — resize the window and the video stays proportional with zero JavaScript and zero media queries recalculating a height. This is the same pattern for responsive images before they load (reserving layout space to avoid a layout shift) and for embed containers like maps or iframes.

What people usually miss

Watch out

The syntax accepts a single number, not just a ratio. aspect-ratio: 1 is valid and means a square (equivalent to 1 / 1) — you don't have to write 1 / 1 explicitly, though it's often clearer to.
It's a preferred ratio, not an absolute one. Setting both width and height explicitly, or letting content overflow, can override the ratio in practice — don't assume aspect-ratio alone guarantees pixel-perfect dimensions in every situation.
On <img>, aspect-ratio (or the equivalent width/height attributes) matters for more than looks — it's how the browser reserves layout space before the image finishes loading, which is a direct, measurable contributor to avoiding layout shift.
It composes with object-fit. Setting an aspect ratio on an <img> or <video> constrains the box, but the actual image content inside that box still needs object-fit: cover (or contain) to control whether it crops or letterboxes to fill it — aspect-ratio alone doesn't decide that.

Why this matters in interviews

"How did people keep a fixed aspect ratio on a responsive box before CSS had a way to do it directly?" is a real question that checks whether a candidate has enough CSS history to recognize the padding-percentage-resolves-against-width hack — and naming aspect-ratio as the direct replacement, honestly caveated as "preferred, not absolute," signals someone who's used it in production rather than just heard the name.