Boneyard Tools

CSS aspect-ratio versus the padding-top hack

How the modern aspect-ratio property and the older padding-top technique each hold a box at a fixed shape, and when to reach for one over the other.

Open the Aspect Ratio Box Generator →

The problem both techniques solve

A responsive layout changes an element's width freely, but height does not follow unless you tell it to. For video embeds, image placeholders and card thumbnails you usually want the height to track the width so the shape never distorts and the page does not jump as media loads. Reserving that space ahead of time also prevents layout shift, which hurts both the reading experience and Core Web Vitals. Both methods this generator produces reserve the correct height from the ratio alone.

How the padding-top hack works

Percentage padding in CSS is measured against the element's width, even for top and bottom padding. That quirk is the whole trick. Setting padding-top to the height divided by the width, times 100, reserves a box whose height is always that fraction of its width. Because the padding fills the box with empty space, the real content is placed in an absolutely positioned child that stretches to all four edges. The generator writes both the wrapper rule and the child rule so the pair works out of the box.

How the aspect-ratio property works

The aspect-ratio property lets you state the ratio directly, for example aspect-ratio: 16 / 9, and the browser sizes the box to match once a width is known. There is no wrapper child, no absolute positioning and no percentage math to reason about, which makes stylesheets shorter and easier to maintain. It has been supported across the major browsers since 2021, so it is a safe default for most audiences today. The generator always prints the reduced ratio, so 1600 by 900 collapses to a tidy 16 / 9.

Choosing between them

Reach for the aspect-ratio property whenever your analytics show that legacy browsers are a rounding error, which covers the vast majority of modern web projects. Keep the padding-top fallback for HTML email, embedded widgets on unknown hosts, or codebases that still target very old versions. If you want belt and braces, you can ship the padding version as a base and layer the aspect-ratio property on top for capable browsers. Either way, the reserved space is identical, so switching methods later will not change your layout.

Frequently asked questions

Can I use the aspect-ratio property with a fixed width?

Yes. The generated rule sets width to 100 percent, but if you constrain the width elsewhere the height still follows the ratio. Aspect-ratio only needs one dimension to be resolvable, then it computes the other.

Will the padding-top method cause layout shift?

No, that is its strength. Because the height is reserved from the ratio before any media loads, the box occupies its final size immediately, so surrounding content does not jump when an image or iframe finishes loading.

Do I still need a fallback in 2026?

For a typical public website, no, since aspect-ratio has been broadly supported for years. Provide the padding-top version only when you target legacy embed environments or email clients where CSS support is unpredictable.