Why padding-bottom and aspect-ratio?

Modern CSS is `aspect-ratio: 16 / 9`. The padding-bottom percentage trick (height/width × 100%) still matters for older embeds and some email clients.

Does 16/9 become 1.777?

The ratio is 16÷9, but the CSS you copy keeps integer terms after gcd so `aspect-ratio: 16 / 9` stays readable.

Give a width to get height, or a height to get width. That is the missing dimension on a replaced element.

Runs in your browser · Last updated 7 September 2026

Free Aspect-Ratio Box Calculator

Free aspect-ratio box calculator. 16/9 (and presets) → CSS aspect-ratio plus the padding-bottom trick. Browser tool — nothing is uploaded.

Ratio widthRatio heightKnown width (px)Known height (px)

Simplified

16 / 9

Height from width

450.00px

Width from height

800.00px

padding-bottom

56.2500%

CSS

aspect-ratio: 16 / 9;

padding-bottom: 56.2500%;

How to use this tool

Pick a preset or type a width/height pair.
Enter a known box width or height.
Copy aspect-ratio and the padding-bottom fallback.

Worked example

16 / 9 at 1280×720: padding-bottom is 56.25%, CSS is aspect-ratio: 16 / 9. A 9 / 16 story is the inverse (177.77% padding-bottom). Fluid type that should track the same viewport is on the CSS clamp calculator.

Frequently asked questions

Why padding-bottom and aspect-ratio?: Modern CSS is `aspect-ratio: 16 / 9`. The padding-bottom percentage trick (height/width × 100%) still matters for older embeds and some email clients.
Does 16/9 become 1.777?: The ratio is 16÷9, but the CSS you copy keeps integer terms after gcd so `aspect-ratio: 16 / 9` stays readable.
Intrinsic size?: Give a width to get height, or a height to get width. That is the missing dimension on a replaced element.
Uploaded?: No.