Aspect Ratio Calculator: simplify, resize and CSS aspect-ratio

Aspect ratio
Decimal
CSS

Common sizes for this ratio

About the Aspect Ratio Calculator

An aspect ratio is the proportion between the width and the height of a screen, image or video, written as two numbers such as 16:9. It describes the shape, not the size, so 1280×720, 1920×1080 and 3840×2160 all share the ratio 16:9. This calculator has two modes. Simplify takes a width and a height and reduces them to the lowest ratio. Resize starts from a ratio and one known side and works out the other.

Each result comes with the decimal value (width divided by height) and the CSS aspect-ratio declaration, ready to copy. When a size is not an exact match for a standard ratio, such as the 1366×768 laptop screen, the tool shows the exact reduced ratio and also the closest common ratio and how far off it is. A preview rectangle is drawn to the ratio, and a list of common sizes for that ratio can be clicked to copy or use.

How to find or keep an aspect ratio

  1. To find a ratio, stay in Simplify and type the width and height.
  2. To resize, switch to Resize and choose a preset or type your own ratio, such as 16:9 or 1.85.
  3. Type the width or the height and the other side updates. Use Keep to choose which side stays fixed when you change the ratio.
  4. Copy the ratio, the decimal or the CSS value, or click a common size.

Frequently asked questions

How do I calculate an aspect ratio?

Divide the width and the height by their greatest common divisor. For 1920 by 1080 the divisor is 120, which gives 16 by 9, so the ratio is 16:9. This tool does it as you type and also shows the decimal value (1.7778) and the CSS aspect-ratio value.

How do I resize an image or video and keep its ratio?

Switch to Resize, choose the ratio, then type either the width or the height. The other side is calculated for you. For a 16:9 ratio, a width of 1280 gives a height of 720.

Why does 1366×768 show as 683:384?

1366 and 768 only share a divisor of 2, so the exact ratio is 683:384. It is very close to 16:9, which is why laptop screens of this size are sold as widescreen. The tool shows the exact ratio and also the closest common ratio and how far off it is.

How do I use the result in CSS?

Copy the aspect-ratio value, for example aspect-ratio: 16 / 9, and add it to an element. The browser keeps that proportion as the width changes, so you no longer need the old padding-top percentage trick for responsive images, videos and cards.

What are the most common aspect ratios?

16:9 for video and most monitors, 4:3 for older screens and some tablets, 3:2 for photos, 1:1 for square social posts, 4:5 and 9:16 for portrait posts and stories, and 21:9 for ultrawide monitors.

Is my data sent anywhere?

No. Everything is calculated in your browser and nothing is uploaded. Your values are kept in the page address so you can bookmark or share a ratio.