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.
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.
Wrong dimensions cost you ranking, not just looks
An image or video embedded without its real width and height causes a specific, measurable problem: the browser does not know how much space to leave for it, so it renders the surrounding text first, then shoves everything down once the asset finishes loading. That jump is called layout shift, and Cumulative Layout Shift (CLS) — the running total of every unexpected shift like it over the page’s lifetime — is one of Google’s three Core Web Vitals, alongside loading speed and responsiveness. Google publishes a threshold for it: a page is rated “good” at 0.1 or less, measured at the 75th percentile of visits. Core Web Vitals feed into the page-experience signals Google has said it uses as part of ranking — one signal among many, not a separate scorecard.
The fix is old and simple: give the browser the numbers up front. A plain
<img width="1920" height="1080"> or <video> tag with its
real pixel dimensions lets the browser compute the aspect ratio before a single byte of the file
has arrived, reserve a box of the right shape, and lay out the rest of the page around it once,
correctly, the first time.
Why this still matters in a responsive layout
The old worry was that a fixed pixel size in the HTML would fight a responsive image that
needs to shrink to fit its container. It does not, and has not for some years: modern browsers
use the width and height attributes only to compute the
element’s intrinsic aspect ratio, then let CSS such as
max-width: 100%; height: auto scale the box to whatever size the layout needs. The
attributes stop dictating a fixed pixel size and start reserving the correct shape.
Dropping them to make an image “fully responsive” throws away exactly the
information the browser needs to prevent the shift.
The CSS aspect-ratio property
For elements that do not carry their own width/height attributes
— a container <div> waiting for a lazy-loaded image, an
<iframe> embed, a video placeholder built before the file is chosen —
the CSS aspect-ratio property does the same job directly in the stylesheet:
.embed { aspect-ratio: 16 / 9; width: 100%; }
The browser reserves a box in that shape at whatever width the layout gives it, before any content inside has loaded. This calculator gives you the number to put on either side of the slash for any ratio you type in above, including the ones platforms present under a marketing name rather than their real number — see the YouTube, Instagram and TikTok pages for the sizes those platforms actually use.
Worked example
A 16:9 hero video sits above a headline and three paragraphs of text. Loaded with no
width/height and no aspect-ratio, the browser renders the
headline and text first, since it has nowhere to put the video yet. When the video’s first
frame arrives a moment later, a 1080 px-tall box appears where there was nothing, and everything
below it — including whatever the reader was starting to read — jumps down the page.
That single event can be enough on its own to push a page over the 0.1 threshold. Give the same
embed width="1920" height="1080", or the equivalent aspect-ratio: 16 / 9
on its container, and the browser reserves that box on the first layout pass instead. The video
takes exactly as long to load either way; nothing else on the page moves while it does.
To be precise about how much this is worth: page experience, CLS included, is one signal among many that Google’s own documentation says it uses, and Google has stated plainly that good page experience does not override having relevant, high-quality content — a page that answers the query wins regardless of its CLS score. Fixing layout shift will not rank a page that would not otherwise rank. What it reliably does is remove a measurable, avoidable source of reader frustration, for the cost of two numbers you already know.
Read the official guidance
- web.dev — Cumulative Layout Shift (CLS) What CLS measures, how it is calculated, and the 0.1 "good" threshold.
- Google Search Central — Understanding page experience Where Core Web Vitals fit among Google's ranking signals, and the explicit statement that relevance is not overridden by page experience.
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 1080 × 360 and 1920 × 640, 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
- Design handoff. Confirm that a mockup drawn at 1440 px wide scales to a 375 px phone without fractional heights.
- Video export settings. Work out the exact frame size for a vertical cut of a horizontal edit, or the size of the letterbox bars a ratio change will produce.
- Print and canvas sizing. Ratios are unit-agnostic. Enter 24 and 36 to confirm a poster is 2:3, then find the pixel size you need at a chosen DPI.
- CSS layout. Get the number to put in
aspect-ratio: 16 / 9, or the percentage for the older padding-top trick — for 16:9 that is 56.25%, which is 9 ÷ 16. - Ad and thumbnail specs. Check whether a platform's stated pixel size matches the ratio it claims. They disagree more often than you would expect.
- Photo cropping. Decide between 3:2 (native to most DSLRs), 4:3 (most phone sensors and Micro Four Thirds) and 1:1 before you crop, rather than after.
Limitations you should know about
- It only knows shape, not pixels. The calculator cannot tell you whether an image has enough resolution for a given output — a 16:9 image at 320 × 180 and one at 3840 × 2160 look identical to it.
- Snapping is a convenience, not a fact. When the calculator snaps 683:384 to 16:9 it is making an editorial judgement that 0.05% does not matter. If you are doing pixel-exact compositing, read the note and use the exact reduction.
- Non-square pixels are out of scope. Legacy formats such as DVD PAL (720 × 576 displayed at 16:9) use anamorphic, non-square pixels, so the storage ratio and the display ratio differ. This tool assumes square pixels throughout.
- Safe areas are not modelled. Knowing a TikTok video is 9:16 does not tell you that the bottom fifth is covered by the caption and buttons. Platform pages on this site describe those margins in words; the calculator itself only knows the frame.
- Platform specs change. Recommended upload sizes shift as apps update. Ratios are far more stable than pixel counts, so where a platform page states a ratio, trust it more than the exact number.
- Rounding is per-operation. Chaining resize after resize accumulates up to one pixel of drift each time. Always recompute from the original.