Aspect Ratio Calculator Online

About Aspect Ratio Calculator

Change only the width of an image or video and it stretches. To keep the shape, the height has to change by the same proportion. This page does that sum in both directions: give it a width and a height and it tells you the ratio, or give it a ratio and one side and it fills in the other.

It helps when a video has to fit a 16:9 frame, a designer asks for a 1200 pixel wide version of a square image, or you want to know what shape a monitor is. A scale preview shows the shape, and a ready-made line of CSS is included for web work.

How it works

To find a ratio, the tool divides both numbers by their greatest common divisor, the largest number that goes into both. So 1920 × 1080 reduces to 16:9. It also compares the result with a list of common shapes. If it is within 2% of one, it tells you, which matters because many real sizes are not exact: 1366 × 768 reduces to the unhelpful 683:384, but it is only 0.05% away from 16:9, and most people would call it that.

To resize, the missing side is the known side multiplied by the ratio's other number and divided by its own. Pixels have to be whole numbers, so a result such as 562.5 is rounded, and the page shows the exact value it rounded from. Decimal sizes are scaled up to whole numbers first, so 1.5 by 1 reduces to 3:2. The ratio box takes 16:9, 16/9, 16x9 or a single number such as 1.85.

How to use Aspect Ratio Calculator

1. Under Find the ratio of a size, enter a Width and Height to see the ratio and the closest common shape.
2. Under Resize and keep the ratio, type a Ratio or press a common ratio button.
3. Enter a New width or New height, and the other fills in.
4. Press Copy beside the CSS if you are building a web page.

Real runs

1920 × 1080
1366 × 768
Ratio 16:9, new width 1000

16:9. This is exactly 16:9, used for video and most screens.

683:384. Very close to 16:9 (0.05% off), used for video and most screens. Most people would call this 16:9.

New height 563. The exact value is 562.50, rounded to 563 because pixels are whole numbers. The result is very slightly off the ratio.

aspect-ratio: 16 / 9;

A width of 1000 cannot be exact at 16:9. Widths in multiples of 16, such as 1024 or 1280, always give a whole-number height.

When it helps

• Finding a matching height when resizing an image to a set width
• Working out whether a video needs bars or cropping to fit a 16:9 frame
• Choosing canvas dimensions for a slide, poster or thumbnail
• Writing the CSS aspect-ratio rule to reserve space for images and stop a page from jumping as it loads
• Identifying the shape of a monitor or a phone screen from its resolution

Tips for a better result

• Video codecs often prefer even dimensions, so when a rounded height comes out odd, move to the nearest even number. The ratio barely changes.
• Pick dimensions that divide cleanly when you can. For 16:9, multiples of 16 by multiples of 9 are exact, such as 1280 × 720 and 1600 × 900.
• When the ratio of your source differs from the target, you cannot fit without bars or a crop. The Image Cropper lets you pick which part stays.
• Set both width and height attributes on web images too. Browsers then work out the ratio before the file loads.

Good to know

• It works with numbers only, and does not open or resize a file. Use the Image Resizer to change a real image.
• It handles one ratio at a time and does not produce a set of sizes.
• It assumes square pixels. Some old video formats use non-square pixels, where the stored size and the display shape differ.
• Screen labels such as 21:9 are marketing names, and real panels vary. An ultrawide sold as 21:9 at 3440 × 1440 reduces to 43:18, and the page matches it to 2.39:1 and not to 21:9.

What to use next

• Image Resizer: to apply the size you worked out to a real image
• Social Media Image Resizer: for a ready-made platform size
• Fraction Calculator: for general fraction reducing