search

Found

info Overview

Turn any width:height ratio into the padding-top percentage for responsive boxes, with both the legacy position snippet and a modern aspect-ratio version.

📘 How to Use

  1. Pick a preset ratio or type a custom W and H value
  2. Read off the padding-top percentage and check the preview
  3. Choose the legacy snippet or the aspect-ratio version for your stack

CSS Aspect Ratio Padding Calculator

W
:
H
16:9 — 56.25%

padding-top value

56.25 %

CSS (padding-top hack)

.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.aspect-ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Modern CSS (aspect-ratio)

.aspect-ratio-box {
  aspect-ratio: 16 / 9;
  width: 100%;
}
Copied

grid_view Related

Article

CSS Aspect Ratio Padding Calculator | padding-top Percentage from Any Ratio

Enter a width:height ratio and get the padding-top percentage used by the classic responsive box trick. The tool shows both the legacy position-based snippet and a modern aspect-ratio version side by side, with a preview so you can confirm the shape before copying.

💡 Tool Overview

  • Ratio to percentage: Converts ratios like 16:9 or 4:3 into a value such as padding-top: 56.25%. No need to punch height ÷ width × 100 into a calculator by hand.
  • Two snippets in one place: Shows the padding-top hack (works on legacy browsers) and the shorter aspect-ratio property. Pick whichever matches your project's browser support.
  • Shape preview: A preview box renders the actual proportions of the ratio you typed, so you can sanity-check the result visually.
  • Six presets: 16:9, 4:3, 1:1, 21:9, 3:2, and 9:16 are one click away — covering video embeds, square thumbnails, ultrawide banners, and vertical short-form video.

🧐 Frequently Asked Questions

Q. Why does padding-top preserve an aspect ratio?

A. In CSS, percentage padding is resolved against the width of the containing block, not its height. So padding-top: 56.25% reserves height equal to 56.25% of the element's width, and that relationship holds as the width changes. The padding-top hack exploits exactly this quirk.

Q. If aspect-ratio exists, why keep the old hack?

A. The aspect-ratio property is a one-line solution, but it has no effect on older browsers. On intranet apps, embedded devices, or any environment with a constrained browser matrix, the padding-top hack is still the dependable choice. Compare the two snippets and ship the one that fits your support targets.

Q. How do I fit an iframe or img to the ratio?

A. With the padding-top hack, set the outer box to position: relative, then pin the child with position: absolute, top/left: 0, and width/height: 100%. The snippet this tool outputs already contains that boilerplate, so you can drop an iframe or img straight inside it.

Q. What happens with ratios that don't divide evenly?

A. A ratio like 3:2 gives a repeating decimal such as 66.6666…%. The tool keeps only as many decimal places as needed, so the rounding error is negligible in practice.

📚 Fun Facts

The padding-top hack went mainstream after Thierry Koblentz documented it as "Intrinsic Ratios in Web Design" on A List Apart back in 2009. At a time when CSS had no native way to express a ratio, the technique leaned on an obscure detail of the spec — that percentage padding is width-relative — and it became the canonical way to make responsive video embeds behave.

More than a decade later browser vendors shipped the native aspect-ratio property, which reached stable support across major engines around 2021. The hack hasn't fully retired, though: knowing how it works is still handy when you're reading older codebases or supporting browsers that lag behind the standard.