Aspect Ratio Explained

What an aspect ratio is

An aspect ratio is the proportion between the width and the height of a picture, a video or a screen. It is written as two numbers with a colon, such as 16:9, and it says nothing about size. A phone, a TV and a billboard can all be 16:9. Two pictures with the same ratio have the same shape, and one is a scaled copy of the other.

How to calculate it

Divide the width and the height by their greatest common divisor. The aspect ratio calculator does this for you.

1920 x 1080: the greatest common divisor is 120   ->   16:9
1600 x 1200: the greatest common divisor is 400   ->   4:3
decimal ratio = width / height   (1920 / 1080 = 1.78)

Excel:   =A1/GCD(A1,B1)&":"&B1/GCD(A1,B1)
Python:  from fractions import Fraction; Fraction(1920, 1080)   # 16/9
JavaScript: const g = (a, b) => b ? g(b, a % b) : a;

Common ratios

Changing the aspect ratio of a picture

You cannot change the ratio of a picture and keep everything in it unchanged. You have three options:

1. Crop. Cut away the parts outside the new shape. Nothing is distorted, but part of the picture is lost. See how to crop an image.
2. Add bars (pad). Place the picture in a bigger frame of the new shape and fill the empty space. Nothing is lost, but the picture is smaller inside the frame. Bars at the top and bottom are letterboxes, and bars at the sides are pillarboxes.
3. Stretch. Force the picture to the new width and height. It fills the frame, but people and objects look squashed or stretched. Avoid it.

Resizing without distortion

Scale both sides by the same factor. If you change the width, the new height is the new width multiplied by the original height and divided by the original width. The width and height calculator does this, and rounds to even numbers for video. The image resizer resizes the picture itself.

Aspect ratio in CSS and HTML

/* CSS */
.video { aspect-ratio: 16 / 9; width: 100%; }
img    { object-fit: cover; }    /* fill the box and crop the rest */
img    { object-fit: contain; }  /* fit the whole picture with bars */

<!-- HTML: width and height attributes let the browser reserve the space -->
<img src="photo.jpg" width="1600" height="900" alt="...">

Set the width and height attributes on images. Browsers use them to work out the aspect ratio before the picture loads, so the page does not jump when the picture appears.

Video

# ffmpeg: scale to a width of 1280 and keep the ratio, with an even height
ffmpeg -i in.mp4 -vf "scale=1280:-2" out.mp4

# Pad a 4:3 video into a 16:9 frame with black bars
ffmpeg -i in.mp4 -vf "scale=-2:1080,pad=1920:1080:(ow-iw)/2:(oh-ih)/2" out.mp4

# Crop a video to 16:9
ffmpeg -i in.mp4 -vf "crop=iw:iw*9/16" out.mp4

Display ratio and pixel ratio

The display aspect ratio is the shape that you see. The pixel aspect ratio is the shape of each pixel. Modern pictures and videos use square pixels, so the two are the same. Some older video formats and anamorphic footage use pixels that are not square, so a 720 x 480 file can display as 4:3 or as 16:9.

Related tools

Use the aspect ratio calculator to find or scale a ratio, the image cropper to crop to a ratio, and the image rotator to turn a picture on its side.