Aspect Ratio Calculator

Reduce any width and height to its simplest ratio and copy modern aspect-ratio CSS — entirely on this device.

0 bytes uploaded

Parameters

Jump to result

Original width

Original height

New width

New height

Common ratios

Round to whole pixels

Rounds a solved dimension to the nearest pixel; off keeps decimals.

Result

Reduced ratio: 16:9Matches 16:9
Decimal ratio: 1.7778

Modern browsers

aspect-ratio: 16 / 9;

Legacy fallback

padding-top: 56.25%;

Preview

Press ? for shortcuts

Do it offline:$ node -p 'const g=(a,b)=>b?g(b,a%b):a;const d=g(1920,1080);"aspect-ratio: "+1920/d+" / "+1080/d'

How to use it

Enter a width and height, or any three of the four fields to solve the one you leave empty.
Or press a preset — 16:9, 4:3, 21:9 and the rest — to fill the original pair.
Read the reduced and decimal ratios while the preview box resizes to that shape.
Copy the aspect-ratio declaration or the padding-top fallback, or download both as a .css file.
Keep rounding on for whole-pixel answers, or switch it off to keep decimals.

Type a width and a height to reduce them to the simplest whole-number ratio, or fill any three of the four dimension fields to solve the one you left blank. The page returns a copy-ready aspect-ratio declaration, the classic padding-top fallback, and a live preview box sized by that ratio. Every calculation happens in your browser; nothing about your layout leaves this device.

How it works

The reduced ratio is the pair divided by its greatest common divisor. For 1920 by 1080 that divisor is 120, which leaves 16:9. The same Euclid step handles decimals by first scaling both numbers up to whole units, so 2.5 by 5 reduces cleanly to 1:2.

Leave one field blank and the tool cross-multiplies the proportion width1 / height1 = width2 / height2. Starting from 16:9 with a new width of 1280, it solves the new height to 720. A result that falls between pixels, such as 562.5, is rounded to 563 unless you turn rounding off.

Modern engines accept aspect-ratio: 16 / 9; and size the box with no wrapper. The older padding-top hack still has its uses: percentage padding resolves against the parent's width, so a top padding of height ÷ width × 100 reserves the right height — 9 ÷ 16 × 100 is 56.25%. Portrait ratios push that past 100%, so a tall box needs a positioned wrapper.

Examples

1920 × 1080 pixels

aspect-ratio: 16 / 9;

A 1080p frame: dividing 1920 and 1080 by their greatest common divisor, 120, gives 16:9. The padding-top fallback is 56.25%, and the reduced form matches the built-in 16:9 preset.

Original 16 : 9, new width 1280

aspect-ratio: 16 / 9;

Cross-multiplying 16 / 9 against a new width of 1280 solves the new height to 720 with nothing to round; the ratio and its CSS stay 16:9.

1366 × 768 pixels

aspect-ratio: 683 / 384;

The common laptop resolution is not exactly 16:9. It reduces to 683:384 — a decimal ratio of 1.7786 — so the fallback is 56.2225% and the tool flags the unusually large terms rather than hiding them.

Every example on this page is executed against the same engine that powers the tool, on every build.

Gotchas worth knowing

1366 × 768 is flagged, not forced to 16:9

This panel reduces to 683:384 (1.7786). Because both terms pass one hundred, the result carries an uncommon-ratio note rather than a tidy 16:9.

Portrait ratios need a wrapper

A 9:16 story frame produces padding-top: 177.7778%, above one hundred percent; apply it to a positioned wrapper, which the tool flags for you.

A square is a 100% box

Equal width and height reduce to 1:1, and the padding-top fallback lands at exactly 100% — the one case that asks nothing of you.

Decimals scale to whole numbers

Enter 2.5 by 5 and both sides scale to integers before the divisor runs, so the ratio prints as 1:2.

Solved pixels round by default

A 16:9 box at a 1000px width solves the height to 562.5 and rounds to 563 with a note; turn rounding off to keep 562.5.

16:10 and 8:5 are the same box

1440 × 900 reduces to 8:5, which the preset table still labels 16:10 because it compares reduced forms, not the raw numbers.

Intrinsic media ratios are out of scope

This tool serialises a ratio you supply. It does not read a video or image's own dimensions; aspect-ratio: auto on replaced elements is separate.

Common errors

Original height must be a positive number.: A height of zero or below has no ratio and would divide by zero in the padding math, so each of the four fields reports its own positive-number refusal.
Enter a full width-and-height pair, or any three of the four fields, to compute an aspect ratio.: A single number, or two widths with no heights, cannot pin a proportion; the solver needs a complete pair or any three fields.
Original width exceeds the 1,000,000 limit (MAX_DIMENSION).: Every field is capped at one million pixels; past the cap the tool refuses and names the limit instead of returning a runaway ratio.

FAQ

How do I convert a resolution like 1920x1080 into an aspect ratio?

Type 1920 as the width and 1080 as the height. The calculator divides both by their greatest common divisor and shows 16:9, the declaration aspect-ratio: 16 / 9;, and a 56.25% padding-top fallback. Any width-and-height pair reduces the same way.

Do I still need the padding-top hack when aspect-ratio exists?

For current browsers, no — the aspect-ratio property sizes the box by itself. Keep the padding-top fallback for engines that predate it, or when a parent needs a height before its content loads. The tool prints both, so the choice is yours.

Why does 1366x768 not reduce to 16:9?

Because it is not a 16:9 image. 1366 over 768 is about 1.7786, while true 16:9 is 1.7778; the closest whole-number reduction is 683:384. Panel makers rounded the pixel grid, so the popular laptop size only approximates the ratio.

Keyboard shortcuts

⌘/Ctrl + Enter: Force a fresh solve, though the result already updates on each valid keystroke.
⌘/Ctrl + C: With no text selected, copy the aspect-ratio declaration; a focused number field keeps its own copy behaviour.
⌘/Ctrl + Shift + C: Copy the aspect-ratio declaration even when some text on the page is selected.
⌘/Ctrl + S: Save the declaration as a .css file, taking over the browser's save-page shortcut.
t: Step through the light and dark themes while no field is focused.
? or ⌘/Ctrl + /: Show the keyboard reference for this calculator.
Esc: Dismiss whichever dialog is open, leaving the fields untouched.

Nothing you paste here leaves this tab. State only ever travels in links you explicitly create.

MDN — aspect-ratio · CSS Box Sizing Level 4 — aspect-ratio · MDN — <ratio> type

Last reviewed: 2026-08-10