I once shipped a WordPress theme where every featured image on mobile looked like it had been through a mangle. Faces stretched, logos squashed. The cause was three characters in a CSS file: a height: 240px sitting next to a width: 100%. On a 375-pixel phone that produced a ratio of roughly 1.56:1, and the images were 16:9 — 1.78:1. Not a huge difference on paper. Very obvious on a human face.
Aspect ratio is one of those things that feels too simple to get wrong, so nobody double-checks it. It is a single division. And yet it quietly ruins video exports, OpenGraph previews that get cropped in the wrong place, thumbnails with black bars, and hero images that look fine on your 27-inch monitor and terrible on a phone. The maths is trivial; the cost of a rounding mistake is not.
I build toolz.dev and I do this calculation constantly — sizing images for a plugin's admin screens, exporting Reels-format video, working out what an OpenGraph image should actually be. So I built the Aspect Ratio Calculator to do it in one field and show its working. Give it a ratio and one dimension, it gives you the other. Give it a size, it reduces it to the ratio and tells you what that ratio is called.
TL;DR: Aspect ratio is width divided by height, written as two numbers with a colon. To find a missing height:
width × (ratioHeight ÷ ratioWidth). To find a missing width:height × (ratioWidth ÷ ratioHeight). To get the ratio from a size, divide both numbers by their greatest common divisor — 1920 and 1080 share a GCD of 120, which gives 16:9. The Aspect Ratio Calculator does all three in your browser, with presets for 16:9, 9:16, 1:1, 4:3, 3:2, 21:9, 1.91:1 and 2.39:1.
What is an aspect ratio?
An aspect ratio is the proportional relationship between an image's width and its height. It is written as two numbers separated by a colon — 16:9, 4:3, 1:1 — and what it describes is shape, not size.
That distinction is the whole game. 1280 × 720, 1920 × 1080, and 3840 × 2160 are three different resolutions with one aspect ratio. They are the same shape at three sizes, which is why any of them scales into any other without distortion or cropping. Meanwhile 1920 × 1080 and 1920 × 1200 have almost the same width, differ by 120 pixels of height, and are fundamentally different shapes — one is 16:9, the other is 16:10, and putting content designed for one into a container built for the other means letterboxing or a crop.
The ratio is just width ÷ height expressed as a fraction in lowest terms. 1920 ÷ 1080 = 1.777…, and the fraction 1920/1080 reduces to 16/9. Both are the same fact stated two ways: the decimal form is easier to compare (is 1.78 wider than 1.5? obviously), and the colon form is easier to say.
The three calculations you actually need
Solving for a missing dimension
You know the shape and one side. This is the most common case in practice: "I need a 16:9 image and my container is 1280 pixels wide — how tall?"
height = width × (ratioHeight ÷ ratioWidth)
= 1280 × (9 ÷ 16)
= 720
And in the other direction:
width = height × (ratioWidth ÷ ratioHeight)
= 1080 × (16 ÷ 9)
= 1920
In the calculator, pick a preset or type your ratio, fill in the dimension you know, leave the other blank, and hit Calculate. It fills in the empty field and shows the arithmetic underneath.
Reducing a size to its ratio
You have a size and want to know its shape — usually to check that two assets match, or to work out what a client's mystery-dimensioned export actually is.
The method is the greatest common divisor. Find the largest number that divides both dimensions evenly and divide both by it. For 1920 and 1080 that number is 120: 1920 ÷ 120 = 16, 1080 ÷ 120 = 9. Ratio 16:9.
This is where the answers get interesting, because real-world sizes often do not reduce to a marketing-friendly ratio. A 3440 × 1440 ultrawide monitor reduces to 43:18. A 2560 × 1080 one reduces to 64:27. Both are sold as "21:9", and neither actually is — 21:9 would be 3360 × 1440. The label is a rounding of the decimal (≈2.39:1 and ≈2.37:1) into something that sounds tidy next to 16:9. The calculator gives you the true reduced ratio and the decimal, so you can size from reality rather than from a spec sheet.
Scaling and fitting
Two variants of the same idea. Scaling multiplies both dimensions by the same factor, which by definition preserves the ratio — a 50% scale of 1920 × 1080 is 960 × 540, still 16:9. Fitting shrinks a source size until it sits inside a bounding box without distortion: take the smaller of boxWidth ÷ sourceWidth and boxHeight ÷ sourceHeight and scale by that. A 4000 × 3000 photo fitted into a 1200 × 1200 box becomes 1200 × 900. This is exactly what CSS object-fit: contain does, and exactly what an image CDN does when you ask for a max-dimension resize.
Key features of the Aspect Ratio Calculator
Ten presets, labelled with where they are actually used
16:9 for standard video and most displays. 9:16 for Reels, Shorts, TikTok, and Stories. 1:1 for square social posts and avatars. 4:3 for older displays and iPad. 3:2 for DSLR photography and 35mm film. 2:3 for portrait prints. 5:4 for 8×10 prints. 21:9 for ultrawide. 1.91:1 for OpenGraph link-preview images. 2.39:1 for anamorphic widescreen. Hovering a preset tells you what it is for, which matters more than the number when you are trying to remember which one Instagram wants.
The formula under every answer
The result panel shows the exact arithmetic — 1280 × (9 ÷ 16) = 720. Partly so you can verify it, partly so you can lift it into a spreadsheet or a script. If you are going to hard-code a dimension into a CSS file or a Tailwind config, you should be able to see where the number came from.
The reduced ratio, the decimal, and the name
Every result reports all three representations: the reduced integer ratio (16:9), its decimal form (1.778:1), and a common name if it has one. Decimal is what you compare against; the name is what you type into a design brief.
Megapixels and total pixel count
Every result includes the pixel count in megapixels. This is the number that actually predicts memory use and file size when you are resizing images — a 4000 × 3000 photo is 12 MP, and doubling its dimensions quadruples that to 48 MP, not doubles it. If you are generating responsive image sets, that quadratic relationship is the thing to keep in your head. When you are done sizing, Image Resize and Image Compress do the actual work, in the browser.
A live shape preview
A rectangle in the result panel, drawn to the ratio you just calculated. It sounds decorative and it is not — the fastest way to catch that you typed 9:16 when you meant 16:9 is to look at a tall box when you expected a wide one.
Client-side, offline, no signup
Plain JavaScript arithmetic in your browser. Nothing is sent anywhere, nothing is logged, and the page keeps working with the network off.
Which aspect ratio should I use?
| Ratio | Decimal | Where it is used | Typical pixel size |
|---|---|---|---|
| 16:9 | 1.778 | YouTube, HD/4K video, most monitors, TVs | 1920 × 1080, 3840 × 2160 |
| 9:16 | 0.563 | Instagram Reels, TikTok, YouTube Shorts, Stories | 1080 × 1920 |
| 1:1 | 1.0 | Instagram feed posts, avatars, product thumbnails | 1080 × 1080 |
| 4:5 | 0.8 | Instagram portrait feed post (largest feed footprint) | 1080 × 1350 |
| 1.91:1 | 1.91 | OpenGraph / Twitter Card link previews | 1200 × 630 |
| 4:3 | 1.333 | iPad, older monitors, many camera sensors | 2048 × 1536 |
| 3:2 | 1.5 | DSLR and mirrorless stills, 35mm film, photo prints | 6000 × 4000 |
| 21:9 (really ~2.37–2.39:1) | ~2.38 | Ultrawide monitors, cinematic crops | 3440 × 1440 |
| 2.39:1 | 2.39 | Anamorphic widescreen cinema | 4096 × 1716 |
Two practical notes. The 1200 × 630 OpenGraph size reduces to 40:21, a decimal of 1.905 — close enough to 1.91:1 that everyone calls it that, and it is the size Facebook, LinkedIn, and X all render cleanly. Check the result with the Open Graph Preview tool before you ship it, because a badly cropped preview image is the most visible bug on a link nobody clicks. And 4:5 is worth knowing for Instagram specifically: it occupies more vertical space in the feed than 1:1, which is free attention.
Common use cases
Sizing responsive images without distortion
You are building a card grid and the design calls for 16:9 thumbnails at a container width of 384 pixels. Calculate: 384 × 9 ÷ 16 = 216. Now you have a concrete size for both your CSS aspect-ratio: 16 / 9 declaration and your image export, and they agree with each other. Modern CSS makes this easier than it used to be — aspect-ratio in CSS takes the ratio directly and lets the browser do the arithmetic — but you still need the pixel dimensions for the asset itself.
Exporting video for a specific platform
You shot 16:9 and need a 9:16 vertical cut. The height stays at 1920, so the width is 1920 × 9 ÷ 16 = 1080. That is your export size — and the reason the numbers look familiar is that 1080 × 1920 is simply 1920 × 1080 with the axes swapped, which is what "vertical video" means.
One thing the calculator will not do for you: H.264 requires even dimensions. If your maths lands on an odd number, round the odd side down by one pixel or your encoder will refuse the job.
Working out what a mystery asset actually is
A client sends assets at 1440 × 1800 and asks why they crop badly on the homepage. Reduce it: GCD of 1440 and 1800 is 360, giving 4:5. Your homepage slots are 16:9. Those two shapes cannot both be satisfied without cropping — now you have a concrete answer and a decision to make, rather than a vague feeling that something is off.
Checking that a set of assets is consistent
Before a launch, run every hero image's dimensions through the ratio mode. If one of thirty comes back as 1.6:1 while the rest are 1.778:1, you have found the asset that will look subtly wrong on the live site, and you have found it before a user does.
Technical notes worth knowing
Rounding. Most ratio calculations do not land on whole pixels. 16:9 at a width of 1000 gives a height of 562.5. The calculator rounds to the nearest whole pixel, so you get 563 — a shape that is 1.7762:1 rather than 1.7778:1, a difference of about one tenth of one percent, and invisible. Do not chase it. Do notice that consistently rounding down across an image set can accumulate a visible drift if you are stacking elements; round from the source dimension each time rather than from the previous result.
Pixel aspect ratio vs display aspect ratio. In broadcast video these can differ: old DV footage stored 720 × 480 pixels but displayed them as 4:3 by making each pixel non-square. Almost nothing you touch today does this — everything is square pixels — but if you are working with legacy footage and the maths refuses to add up, this is why.
aspect-ratio in CSS. Since 2021 you can write aspect-ratio: 16 / 9 and let the browser hold the shape while one dimension is fluid. Use it. It removes an entire class of the padding-top-percentage hacks that used to be necessary, and it means your layout stays correct at widths you never tested. You still want the calculator for the asset export, because the image file has to be a real number of pixels.
Cropping is not scaling. If a source and target ratio differ, you cannot resize between them — you must crop, letterbox, or distort. Choose deliberately. object-fit: cover crops (and is usually what you want for photos), contain letterboxes (usually what you want for logos), and fill distorts (almost never what you want, and the cause of my mangled-faces bug at the top of this article).
FAQ
How do I calculate aspect ratio from width and height?
Divide both numbers by their greatest common divisor. For 1920 × 1080 the GCD is 120, so the ratio reduces to 16:9. Switch this calculator to Get Ratio mode, enter both dimensions, and it does the reduction and names the ratio for you.
What height do I need for a 16:9 image at 1280 pixels wide?
Multiply the width by 9 and divide by 16: 1280 × 9 ÷ 16 = 720. So a 16:9 image 1280 pixels wide is 720 pixels tall. Enter the 16:9 preset and a width of 1280 to confirm it.
What is the difference between aspect ratio and resolution?
Aspect ratio is the shape — the proportion of width to height. Resolution is the actual pixel count. 1280 × 720 and 1920 × 1080 are different resolutions with the same 16:9 aspect ratio, which is why one scales to the other without distortion or cropping.
Which aspect ratio should I use for social media?
Use 1:1 or 4:5 for Instagram feed posts, 9:16 for Reels, Stories, TikTok, and YouTube Shorts, 16:9 for standard YouTube video, and 1.91:1 for Open Graph link preview images on Facebook, LinkedIn, and X. The presets in this tool include all of these.
Why does my resized image look stretched?
The new width and height do not match the original ratio, so the image is being squashed along one axis. Calculate the target height from your target width using the original ratio instead of typing both numbers by hand — that is exactly what the solve-for-missing-side mode is for.
What does 21:9 actually mean?
It is a marketing label for ultrawide displays. The true ratio of a 3440 × 1440 monitor is 43:18, roughly 2.39:1, and a 2560 × 1080 panel is 64:27. Both get rounded to "21:9" in product listings. If you need exact pixel dimensions, calculate from the real panel resolution rather than the label.
How do I keep an aspect ratio when the result is not a whole number?
The calculator rounds to the nearest whole pixel, which introduces at most a half-pixel of drift — invisible in practice. Video encoders are stricter: H.264 requires even dimensions, so round the odd side down by one pixel if an encoder rejects your size.
Does this calculator work offline?
Yes. Every calculation is plain JavaScript arithmetic running in your browser. No dimensions are sent to a server, nothing is logged, and the tool continues to work with no internet connection once the page has loaded.
Related tools
- Image Resize — apply the dimensions you just calculated, in the browser
- Image Compress — shrink the file once the shape is right
- Percentage Calculator — for the scale-by-percent half of the job
- Open Graph Preview — check that 1.91:1 image before you ship the link
- Format Converter — WebP and AVIF for the assets you just sized
Further reading: The Complete Guide to Image Compression and Essential Image Tools for the Web.
