Aspect Ratio Calculator

Resize an image without squashing it and you need to keep the same aspect ratio. Enter a width and height and this tool reduces them to the simplest ratio (1920 by 1080 becomes 16:9), says whether it matches a common format, and works out the matching height for any new width, or the width for any new height.

How to use it

1. Enter the width and height of your image, video or screen.
2. Read the simplified ratio and the format it matches, if any.
3. Type a new width to see the height that keeps the shape, or a new height for the width.
4. Use those numbers when you resize.

When it helps

• Resizing images and video without stretching them.
• Choosing sizes for social media posts.
• Setting up responsive design elements.
• Finding the ratio of a screen or camera sensor.

Good to know

• If the numbers don't match a common ratio, the ratio is still shown in lowest whole-number terms.
• Decimals are rounded to the nearest pixel.
• To actually crop to a ratio, the Image Cropper does that on the picture itself.

How the ratio is calculated

The tool finds the greatest common divisor of the width and height and divides both by it. For 1920 by 1080, the divisor is 120, giving 16 and 9. The decimal version, 1.778, is the width divided by the height, and is what you'd use in CSS as the aspect-ratio value.

To resize without distortion, the tool uses proportion: new height equals new width times the original height divided by the original width. That's the arithmetic every image editor does when you lock the aspect ratio.

Worked example: resizing a photo

A photo is 4000 by 3000, a 4:3 ratio. You need it 1200 pixels wide for a blog. Enter 1200 as the new width, and the tool shows a height of 900. Any other height would stretch or squash it.

A video of 1920 by 1080 shrunk to 1280 wide becomes 720 high, the familiar 720p. And a phone screen of 1170 by 2532 simplifies to roughly 9:19.5, which explains why some videos have black bars on modern phones.

Choosing a ratio for the job

Cinema uses wider shapes, from 1.85:1 to 2.39:1. Television and online video settled on 16:9. Photographs from cameras are traditionally 3:2, and older monitors and tablets use 4:3. Social media prefers squares and tall shapes: 1:1, 4:5 and 9:16.

If you are designing for several places, pick the shape that fits the most important one, and keep key content in the middle, so crops for other ratios don't cut it off.

Mistakes to avoid

Don't set both width and height by hand without checking the ratio: you will distort the image. Rounding also creeps in. A ratio of 1.777 and 1.778 look the same but give a one-pixel difference at large sizes.

In CSS, the aspect-ratio property keeps shapes right as screen sizes change, which is more reliable than fixed pixel sizes for responsive designs.

Questions