Aspect Ratio Calculator

Aspect Ratio Calculator

Fill in any two of ratio, width and height — the third is calculated as you type. Everything runs in your browser; nothing is uploaded.

Presets
Aspect ratio
Pixel dimensions
16:9

Nearest standard resolutions

    How it works

    An aspect ratio is just the width of a rectangle divided by its height, written as two numbers separated by a colon. A 1920 × 1080 image and a 3840 × 2160 image are different sizes but the same shape: both are 16:9. Everything on this page follows from three small pieces of arithmetic.

    1. Reducing to lowest terms

    To turn a pixel size into a ratio, both numbers are divided by their greatest common divisor (GCD), found with the Euclidean algorithm. For 1920 × 1080 the GCD is 120, so the ratio reduces to 16:9 — not 1920:1080. For 1080 × 1920 the GCD is also 120, giving 9:16. If you type a decimal such as 2.39, both sides are multiplied by 1000 first, so 2.39:1 becomes 2390:1000 and reduces to 239:100.

    2. Snapping near-misses to a standard ratio

    Real-world sizes are often almost a standard shape. A 1366 × 768 laptop panel reduces to 683:384, which is technically correct and completely useless. The calculator checks whether the reduced ratio has a term larger than 32; if it does, it compares the decimal ratio against a table of standard ratios (16:9, 4:3, 3:2, 16:10, 21:9, 64:27, 1.85:1, 2.39:1 and others). If one of them is within 0.5%, the calculator shows that standard ratio instead and prints a note telling you the exact reduction and how far off it was. Nothing is hidden: 1000 × 333 is reported as 3:1 with a note saying the exact reduction is 1000:333, within 0.1%.

    3. Scaling to a new size

    With the ratio locked, changing one dimension multiplies through: height = width × (ratio height ÷ ratio width), and width = height × (ratio width ÷ ratio height). With the lock switched off, the two pixel fields are treated as the source of truth and the ratio is recalculated from them instead.

    Rounding rule

    Pixels are whole numbers, so every computed dimension is rounded to the nearest integer (exact halves round up), and a result that would round to zero is clamped to 1. This means a round trip is not always lossless: 1000 px at 16:9 gives 563 px (562.5 rounded up), and 563 px back at 16:9 gives 1001 px. When you need an exact pair, pick a width that is a multiple of the ratio width — for 16:9, any multiple of 16 gives a whole-number height.

    The "nearest standard resolutions" list

    For the current ratio the calculator searches a catalogue of just under 50 real-world resolutions. Sizes with exactly the same reduced ratio are listed plainly; sizes within 2.5% are listed with a ≈ and the exact percentage error, which is how you discover that a monitor sold as "21:9" is really 64:27 (2560 × 1080) or 43:18 (3440 × 1440). If fewer than six catalogued sizes match, the list is topped up with exact integer multiples of your ratio, preferring long edges like 1920 and 3840.

    Worked examples

    Example 1 — Resizing a hero image without distortion

    You have a photo at 4032 × 3024 from a phone camera and need it to fit a 1200 px wide slot. Type 4032 and 3024 into the pixel fields with the lock off: the ratio reads 4:3 (GCD 1008). Switch the lock on, change the width to 1200, and the height becomes 900. Exporting at 1200 × 900 keeps the framing identical; exporting at 1200 × 800 would squash it by 12.5% or force a crop.

    Example 2 — A 21:9 banner at a fixed height

    A page design gives you a 1080 px tall header strip and asks for an ultrawide feel. Click the 21:9 preset, then type 1080 into the height field with the lock on. The width computes to 2520 px. The resolution list then shows the honest complication: no shipping monitor is exactly 21:9. It offers 2560 × 1080 (≈ 1.59% off, really 64:27) and 3440 × 1440 (≈ 2.38% off, really 43:18). If the banner must fill a real ultrawide screen edge to edge, design at 2560 × 1080 rather than 2520 × 1080.

    Example 3 — Turning an awkward crop into a sane ratio

    A cropped screenshot measures 1000 × 333. Entered with the lock off, the exact reduction is 1000:333 — a fraction nobody can use. Because 333 exceeds the "ugly term" threshold, the calculator compares 3.003 against the standard table, finds 3:1 within 0.1%, and displays 3:1 with a note explaining the snap. Now you can generate clean sizes: the list offers 1920 × 640 and 3840 × 1280, both exactly 3:1. Re-cropping to 1920 × 640 loses three pixels of height and gains a ratio you can reproduce forever.

    Example 4 — Checking whether a video will letterbox

    A client sends a 1440 × 1080 file and wants it on a 16:9 display. Enter 1440 × 1080: the ratio is 4:3 (1.333:1), not 1.778:1. On a 16:9 screen it will pillarbox with black bars down both sides. To find how wide a true 16:9 frame of the same height would be, click 16:9 with the lock on and 1080 in the height field: 1920 px. The 480 px difference is the total width of the two bars — 240 px each side.

    Frequently asked questions

    Why does 1920 × 1080 show as 16:9 instead of 1920:1080?

    Because both numbers share a greatest common divisor of 120. Dividing through gives 16:9, the lowest-terms form. Ratios are conventionally written in lowest terms so that different sizes of the same shape are instantly recognisable as equivalent: 1280 × 720, 1920 × 1080 and 3840 × 2160 are all 16:9.

    What is the difference between aspect ratio and resolution?

    Resolution is a count of pixels — how much detail there is. Aspect ratio is a shape — the proportion of width to height. 1280 × 720 and 3840 × 2160 have the same ratio but nine times the pixel count difference. Changing resolution while keeping the ratio makes an image bigger or smaller; changing the ratio without cropping makes it distorted.

    Is 21:9 a real aspect ratio?

    Not literally. "21:9" is a marketing label for ultrawide displays. The panels themselves are 64:27 (2560 × 1080 and 5120 × 2160, exactly 2.370:1) or 43:18 (3440 × 1440, 2.389:1), while true 21:9 is 2.333:1. The gap is 1.6–2.4% — small enough to be invisible on a photo, large enough to shift a logo or subtitle off the edge of a full-bleed layout. This calculator will happily compute exact 21:9 sizes, but the resolution list always shows you the real panel sizes alongside.

    Why doesn't my height come back to the same number when I convert twice?

    Rounding. Pixels are integers, so 1000 px at 16:9 becomes 562.5 px, which rounds to 563. Going back the other way, 563 px at 16:9 is 1000.9 px, which rounds to 1001. The drift is never more than one pixel per conversion, but it compounds if you chain many resizes. Work from the original dimensions each time rather than from the last result, or choose a width that is a multiple of the ratio's width term.

    What ratio should I use for a website hero image?

    There is no single answer, because the browser window is the real constraint. Common choices are 16:9 for a cinematic banner, 3:1 or 21:9 for a slim strip, and 4:5 or 1:1 for a mobile-first block. The practical technique is to design at the widest ratio you support, keep all essential content inside a centred "safe area" matching the narrowest ratio you support, and let CSS object-fit: cover crop the difference. Use the calculator to check that both extremes share a workable height.

    Does changing aspect ratio reduce quality?

    Changing the ratio by cropping discards pixels but keeps everything that remains pixel-perfect. Changing it by stretching preserves every pixel but distorts geometry — faces widen, circles become ellipses — and is almost never acceptable. Changing it by padding (letterboxing or pillarboxing) preserves the image and adds bars. Scaling down within the same ratio is generally safe; scaling up cannot invent detail and softens the image.

    How do I handle non-integer ratios like 2.39:1?

    Type the decimal straight into the ratio width field with 1 in the ratio height field. The calculator multiplies both by 1000 and reduces, giving 239:100. Cinema scope is a good example: a 2.39:1 delivery at 1080 px tall is 2581 px wide, and at 4096 px wide it is 1714 px tall. DCI 4K containers usually store scope footage as 4096 × 1716 to keep the height even, which is why professional specs round to even numbers rather than to the mathematically nearest pixel.

    Why should width and height be even numbers for video?

    Most video codecs (H.264, H.265, VP9, AV1) encode colour information at half resolution horizontally and vertically — this is 4:2:0 chroma subsampling. An odd dimension cannot be halved cleanly, so encoders either refuse the file or silently pad it. If you are producing video rather than stills, round the calculator's output to the nearest even number, and to a multiple of 4 or 16 if your encoder complains about macroblock alignment.

    Does the calculator send my numbers anywhere?

    No. The entire calculation runs in JavaScript in your browser, and the numbers you enter are never uploaded or transmitted — there is no server call to make, because there is no server behind the calculator. It keeps working with the network disconnected, and works if you save it to disk and open it offline.

    Use cases & limitations

    Where this tool helps

    Limitations you should know about