How to Calculate Aspect Ratio

An aspect ratio is one number

Width ÷ height.

1920 × 1080 = 1.7778. So does 1280 × 720. So does 3840 × 2160.

That decimal is the concept. Two images have the same shape if and only if their decimals match — whatever their pixel dimensions. Everything else is notation for that one number.

Why the decimal beats 16:9

Because you can compare decimals at a glance and you can't compare colons.

1.7778 against 1.5 — instantly obvious which is wider. 16:9 against 3:2 — requires arithmetic before it means anything.

The decimal also handles ratios with no tidy whole-number form, which is most real images after any crop at all. Colon notation is good for naming a standard and poor for working with a file.

Ratio	Decimal	Where you meet it
16:9	1.7778	Video, most monitors, YouTube
4:3	1.3333	Older screens, many sensors, iPads
3:2	1.5	Most DSLR/mirrorless photos, 6×4 prints
1:1	1.0	Square
9:16	0.5625	Vertical video, Stories, Reels
21:9	~2.3333	Ultrawide monitors

Cinema "scope" formats are nearer 2.39 — not the same thing as 21:9, despite being used interchangeably.

Resizing without distorting

Hold the decimal constant. Which of the two formulas you need depends on what's pinning you:

• Width is fixed (a content column, a banner slot) → new height = new width ÷ ratio
• Height is fixed (a header strip, a fixed-height row) → new width = new height × ratio

1920 × 1080 down to 1280 wide → 720 tall.

The calculator shows both at once, because in practice you're constrained by width about half the time and by height the other half, and it's annoying to work out which formula you're in.

Why your photos keep getting cropped

Because the shapes genuinely don't match, and something has to give.

A camera shoots 3:2 — 1.5. A phone screen in portrait is 9:16 — 0.5625. Those aren't close.

Print sizes are the same story, and this one surprises people:

Print	Decimal	Against a 3:2 photo
6×4	1.5	Perfect match
5×7	1.4	Crops
8×10	1.25	Crops hard

That's why the same image ordered in three sizes comes back framed three different ways — and why the 8×10 of a group photo loses the people at the edges. Nothing went wrong at the lab.

The percentage output

Height ÷ width × 100. For 16:9 that's 56.25%.

This is the number responsive layouts use. The long-standing CSS technique for reserving space for an image or embed before it loads sets a padding based on exactly this percentage, so the page doesn't jump when the media arrives.

Modern CSS has an aspect-ratio property that does it directly — but the percentage still turns up in a great deal of existing code and in most embed snippets you'll be handed.

Upscaling adds pixels, never detail

Doubling both dimensions preserves the ratio perfectly and produces an image with four times the pixels and exactly as much detail as before. The extra pixels are interpolated from the ones you already had.

The arithmetic will happily give you correct enlarged dimensions. Whether the result looks acceptable is a different question that no calculator can answer. Getting a ratio right and getting an image sharp are separate problems.

Area grows with the square of the scale

Worth internalising, because it's usually the surprise:

1920 × 1080 = 2,073,600 px. At 1280 wide — a scale factor of 0.667 — it's 921,600 px.

Two thirds the width is 44% of the pixels. And often something close to that share of the file size.

Which is why modest resizes save more bandwidth than people expect, and why a "slightly bigger" image is rarely slightly bigger.

Print the ratio reference — common ratios as decimals, both resize formulas, and a table for listing every size one image has to exist in.