Aspect Ratio Calculator — Simplify, Scale & Fit
Work with aspect ratios: reduce a width:height to its simplest form, scale a side to a target, fit into a box, and see matching resolutions.
—
What this tool does
It does the arithmetic around aspect ratios that people otherwise reach for a calculator to do by hand: reduce a width:height to its simplest form, find the other side when you scale one, fit an image into a box of a different shape without stretching it, and recognise which well-known resolutions share a ratio.
The common ratios
| Ratio | Used for |
|---|---|
| 16:9 | Widescreen video, most monitors and phones in landscape. |
| 9:16 | Vertical video — Stories, Reels, Shorts, TikTok. |
| 4:3 | Older television and monitors, many cameras' native stills. |
| 1:1 | Square — profile pictures, album art, social grid posts. |
| 3:2 | 35mm film and most DSLR sensors. |
| 21:9 | Ultrawide monitors and anamorphic cinema. |
Contain versus cover
When an image must go into a box of a different ratio there are two honest options, and every layout system names them the same way. Contain scales the image until it fits entirely inside the box, leaving background bars where the shapes disagree. Cover scales it until it fills the box, cropping whatever spills over. Neither distorts the image — the alternative, stretching to fit, is what makes faces look wrong.
Why the ratio matters more than the size
A 16:9 video plays correctly at any resolution because its shape is fixed; give it a 4:3 frame and it either letterboxes or gets cropped. Reserve the right ratio in a layout and the content drops in without a shift; get it wrong and the page jumps when the real media loads. That is the practical reason to know your ratios — it keeps the space a thing will occupy from surprising you.
Frequently asked questions
What is an aspect ratio?
The proportional relationship between an image or screen’s width and its height, written width:height — 16:9 for widescreen, 4:3 for older video, 1:1 for a square. It says nothing about absolute size: a 1920×1080 screen and a 1280×720 one are both 16:9.
How do I work out the missing side?
Keep the ratio constant. If you know the new width, the height is width × (height ÷ width) of the ratio; if you know the height, the width is height × (width ÷ height). This tool does that for whichever side you give, so a 16:9 image at width 1920 is height 1080.
What does "fit to a box" do?
It scales an image so it sits inside a box of a different ratio without distorting. Contain fits the whole image inside (leaving bars), cover fills the box (cropping the overflow) — the same two options every image-fitting API offers, so the numbers here match what CSS object-fit does.
Why simplify the ratio?
A ratio of 1920:1080 is the same as 16:9, but the simplified form is what people say and what CSS aspect-ratio: 16/9 uses. Reducing by the greatest common divisor gives the familiar small numbers.
What is PPI?
Pixels per inch — how densely the pixels sit on a physical screen, from the pixel dimensions and the diagonal size in inches. A higher PPI means a sharper display; it is a property of the hardware, not the image.
Is anything uploaded?
No. The maths is done in your browser; no image or value is sent anywhere.
Go deeper
Longer explanations of the problems this tool solves:
Sources
- CSS Box Sizing / object-fit — contain and cover fitting.
- SMPTE and ITU standards — the common broadcast and screen ratios.
Everything runs in your browser — nothing you type is uploaded.