How do I calculate a custom aspect ratio?

Enter ratio W and H (e.g. 7 and 5), then type width or height - the other solves via height = width x rh/rw.

Can I share a custom ratio via URL?

Yes - the URL updates with ?rw=&rh=&w= so you can bookmark or share an exact custom pair.

What is the CSS for a custom ratio?

Use aspect-ratio: rw / rh on the container, and padding-top: rh/rw*100% as legacy fallback.

Custom Aspect Ratio Calculator

Any ratio you dream up - 7:5, 2.35:1, 19.5:9 - type the two sides and solve any partner dimension. The URL updates as you type so you can bookmark ?rw=7&rh=5&w=1400 and share an exact custom pair. Start with 16:9 below and edit the ratio to your custom values.

Ratio W:Ratio H

Width (px)Height (px)

1920 × 1080

Exact ratio: 16:9 · CSS: aspect-ratio: 16 / 9 · padding-top fallback: 56.25%

How custom math works

height = width x rh / rw

width = height x rw / rh

// example 7:5 at 1400 wide - 1400x5/7 = 1000 tall

padding-top = rh/rw*100% // 5/7*100 = 71.43%

Fractions and decimals both work - enter 2.35 and 1 for 2.35:1 cinema, or 19.5 and 9 for tall phones. The tool simplifies the ratio and gives the CSS aspect-ratio: rw / rh for any custom pair.

Try a preset then tweak

Pick any preset button, then edit the Ratio W/H fields to your custom numbers - the solved dimensions update live. Copy the pair or the CSS snippet.

Share: the URL encodes your custom ratio - send /custom/?rw=7&rh=5&w=1400 and the recipient sees 1400x1000 prefilled.

Custom Aspect Ratio Calculator

How custom math works

Try a preset then tweak

Related