Understanding Aspect Ratios

Black bars on a video. A profile picture with the top of someone's head cut off. A banner that looked perfect on your laptop and is unrecognisable on a phone. Every one of these is an aspect ratio problem — and they are all avoidable once you understand what the ratio is actually doing.

What an aspect ratio is

The aspect ratio is the proportion between width and height, written as two numbers like 16:9.

The essential insight is that it describes shape, not size. 1920×1080, 1280×720 and 640×360 are all 16:9 — the same rectangle at three different scales. As long as the ratio holds, content scales cleanly between them.

How to calculate it

Divide the width and the height by their greatest common divisor — the largest number that goes evenly into both.

Take 1920×1080. Both divide by 120, giving 16:9.

Take 1024×768. Both divide by 256, giving 4:3.

When the numbers do not simplify neatly, the decimal ratio is more useful: just divide width by height. 1920 ÷ 1080 = 1.78, the signature of 16:9. Anything close to 1.78 is widescreen; 1.0 is square; below 1.0 is portrait.

Resizing without distortion

The golden rule: change width and height by the same factor. Halve one, halve the other.

If you know the new width and need the matching height:

new height = new width × (original height ÷ original width)

From 1920×1080, a new width of 1280 gives 1280 × (1080/1920) = 720. Which is exactly the 16:9 you started with.

Get this wrong — change one dimension without the other — and everything stretches. Faces become wide and squat, or unnaturally thin. It is instantly noticeable to viewers even when they cannot articulate why the image looks off.

If you need a genuinely different shape, crop — never stretch. Cropping removes content but keeps everything undistorted. Stretching keeps everything and makes all of it wrong.

The ratios, and where they come from

• 16:9 (1.78) — the widescreen standard. YouTube, TVs, monitors, presentations. It was chosen partly as a mathematical compromise between the old 4:3 television standard and the wider cinema formats, so that both could be displayed with tolerable compromise.
• 4:3 (1.33) — the original television and early computer standard. Now mostly historical, though some cameras and slide formats still use it.
• 1:1 — square. Profile pictures and classic social posts.
• 4:5 (0.8) — portrait. Occupies more vertical space in a social feed, so it commands more attention as people scroll. This is why so many brands post in 4:5.
• 9:16 (0.56) — full-screen vertical. Stories, Reels, TikTok. The shape of a phone held normally.
• 3:2 (1.5) — the classic photographic ratio, inherited from 35mm film, and what most cameras still shoot natively.
• 21:9 (2.33) — ultrawide monitors and cinematic film.

Why black bars exist

When content does not match the screen's ratio, something has to give. There are only two options, and both cost you something:

• Letterboxing— fit the whole frame and fill the gaps with black bars. You see all the content, at the cost of unused screen. Bars top and bottom mean the content is wider than the screen; bars at the sides (“pillarboxing”) mean it is narrower.
• Cropping — fill the screen entirely and cut off the edges. No wasted space, but you lose part of the picture.

This is why a 21:9 film shows black bars even on a 16:9 widescreen TV — the film is genuinely wider than the television. And it is why vertical phone video appears with thick bars either side on a TV.

Neither is a fault. They are the honest consequence of a ratio mismatch, and the only real fix is to shoot or export in the ratio your destination actually uses.

Safe zones: the thing that breaks real designs

Here is the practical trap that catches people building for the web and social platforms.

Many platforms display the same image at different crops depending on the device. A website hero banner that is wide and short on desktop is often cropped much more aggressively on mobile. A social preview image gets cut differently in the feed than when opened.

The consequence: you cannot rely on the edges of your image surviving.

The defence is the safe zone. Keep everything essential — faces, text, logos, the subject — in the middle of the frame, and treat the outer margins as expendable decoration. If a platform publishes safe-zone guidelines, follow them. If not, assume the outer 15% might vanish.

The most common casualty is the circular profile picture: platforms ask for a square, then display a circle inscribed inside it. The corners are simply gone. Compose for the circle, not the square.

Common mistakes to avoid

• Stretching to fit. Always visible, always amateurish. Crop instead.
• Designing at one ratio and publishing at another, then being surprised by the crop.
• Putting text near the edges, where it gets cut off on some devices.
• Exporting a vertical video for a horizontal platform and accepting enormous bars.
• Cropping so hard you run out of resolution for the size you need.

Frequently asked questions

What resolution is 16:9? Many: 1920×1080, 1280×720, 3840×2160 (4K) and 640×360 are all 16:9. The ratio is the shape, not the size.

How do I resize without stretching? Keep the ratio locked and set only one dimension — let the other be calculated.

Why does my video have black bars?Its aspect ratio differs from the screen's. The bars preserve the whole frame rather than cropping it.

What ratio should I post on social media? 1:1 or 4:5 for feed posts, 9:16 for Stories and Reels, 16:9 for landscape video.

Calculate an aspect ratio now

Use our Aspect Ratio Calculator to find the simplified ratio of any dimensions and resize proportionally — enter one new dimension and it fills in the other. To actually change an image, pair it with the Image Resizer and the Image Cropper.