Skip to main content

Aspect Ratio Calculator — Width, Height, Ratio in One Pass

Calculate aspect ratio — fix any 1 of [width, height, ratio], get the other two.

  • Runs locally
  • Category Calculator
  • Best for Getting a realistic range before a purchase, plan, workout, or schedule decision.
Lock the field you want to keep fixed
Common ratios
Common sizes
Preview
Simplified ratio
16:9
Decimal
1.7778
Height as % of width
56.25%

What this tool does

A four-field aspect-ratio calculator for designers, video editors, and front-end developers. Lock any one of width, height, or ratio (numerator + denominator) and the other two recompute live as you type. The visual preview shows the actual rectangle at the current ratio so you can sanity-check before exporting. Click a preset (16:9, 4:3, 1:1, 21:9, 9:16, 3:2, 5:4, 2:1) to jump to a common cinema or social ratio, or pick a common size (1920×1080, 1280×720, 1080×1080, etc.) to seed both dimensions at once. The output panel shows three forms: the GCD-simplified ratio (1920×1080 → 16:9), the decimal (1.778), and the height percentage (56.25%) — the same three numbers you need for an HTML aspect-ratio CSS rule, a Premiere sequence preset, and a Tailwind class. 100% client-side; nothing leaves your browser.

Tool details

Input
Numbers
The page exposes text boxes, numeric controls, file pickers, or structured inputs depending on the tool.
Output
Live result + Preview
The result area focuses on usable output, with copy, download, or preview actions when supported.
Privacy
Browser-side processing
The main tool logic does not call an external API, so inputs normally stay in the current tab.
Save / share
No account required
Open the page and use it; whether results survive refresh depends on the tool.
Performance budget
Initial JS <= 12 KB
No WASM budget is declared, keeping the tool quick to open on mobile.
Best fit
Calculator · Designer
Category and role tags drive related tools, internal links, and quick fit checks.

How to use

  1. 1. Input

    Paste or drop your content into the tool panel.

  2. 2. Process

    Click the button. All processing is local in your browser.

  3. 3. Copy / Download

    Copy the result or download to disk in one click.

How Aspect Ratio Calculator fits into your work

Use it for fast estimates, comparisons, and planning numbers before you make the final call.

Calculation jobs

  • Getting a realistic range before a purchase, plan, workout, or schedule decision.
  • Comparing scenarios by changing one input at a time.
  • Turning rough assumptions into a number you can discuss.

Calculation checks

  • Double-check units, dates, rates, and rounding assumptions.
  • Treat health, finance, tax, and legal outputs as planning aids, not professional advice.
  • Save the inputs that produced an important result so you can reproduce it later.

Good next steps

These links move the current task into a more complete workflow.

  1. 1 Percentage Calculator 5 common percentage calculations — "x% of y", "x is what% of y", percentage change, increase/decrease — instant, browser-only Open
  2. 2 Unit Converter Convert between length, weight, temperature, area, volume, speed, time — instant, browser-only Open
  3. 3 Placeholder Image Generator Generate placeholder images instantly — size, color, text, PNG/JPG/WebP. Open

Real-world use cases

  • Resizing a hero image without squishing the subject

    A marketing designer has a 2400x1600 product shot but the new hero slot is only 1040 wide. They lock the ratio at 3:2, type 1040 into width, and read back a height of 693.33. They round to 693, export, and the bottle is not stretched. No mental math, no Photoshop "constrain proportions" guesswork.

  • Setting a Premiere sequence to match phone footage

    An editor gets clips shot vertically at 1080x1920 and needs a 9:16 sequence. They click the 9:16 preset, confirm the decimal reads 0.5625, and copy 1080x1920 into the new-sequence dialog. When a client later asks for a 1:1 cut for the grid, they switch the preset and instantly see 1080x1080 is the safe square crop.

  • Writing a CSS aspect-ratio box for an embedded video

    A front-end dev needs a responsive wrapper for a 1280x720 YouTube embed. The tool simplifies to 16:9 and shows 56.25%, so they paste "aspect-ratio: 16 / 9" for modern browsers and keep "padding-top: 56.25%" as the fallback. One source of truth for both numbers, no off-by-a-rounding bugs on old Safari.

  • Checking whether a laptop panel is truly 16:9

    A QA tester suspects a 1366x768 panel is not exactly 16:9. They type both numbers, and the GCD output shows 683:384 with a decimal of 1.7786, not 1.7778. Now they know the 2-pixel letter gap in fullscreen video is the panel's fault, not the player's, and they file the bug against hardware instead of the codebase.

Common pitfalls

  • Rounding height too early. 16:9 of width 1500 is 843.75, not 843; round only at the final export, or a long page of stacked images drifts by several pixels.

  • Assuming the advertised ratio is exact. 1366x768 is sold as 16:9 but simplifies to 683:384; trust the GCD output, not the marketing label.

  • Confusing 9:16 with 16:9. A 0.5625 decimal is the tall phone shape; if your preview rectangle is wide when you wanted vertical, you swapped width and height.

Privacy

Every calculation runs in your browser with plain JavaScript; no width, height, or ratio is ever sent to a server. The current values are written into the page URL so a "share with result" link reproduces your exact numbers, which means anyone you send the link to can see the dimensions you typed. Nothing is stored or logged on our side.

FAQ

Tool combos

Folks in your role tend to reach for these alongside this tool.

Browse all tools for this role
Made by Toolora · 100% client-side · Updated 2026-06-14