Aspect Ratio Calculator

Continue in the tool

how to calculate aspect ratio

How to calculate the aspect ratio of a screen or image

Aspect ratio describes the shape of a rectangle regardless of its size: 1920x1080 and 1280x720 are both 16:9. Knowing the ratio avoids stretched images when resizing and helps predict bars when showing video on a different screen. The calculator below opens at 1920x1080.

From resolution to ratio and back

Divide width and height by their greatest common divisor (GCD). For 1920x1080 the GCD is 120, and 1920/120 = 16 and 1080/120 = 9, so 16:9. To resize, keep the ratio: new height = new width x 9 / 16. From a width of 1280 you get a height of 720. If the result is not a whole number, round it; for video, rounding to even is usually safest.
Not every resolution reduces to a well-known name. 1366x768 has an exact ratio of 683:384, within 0.1% of 16:9, which is why it is sold as 16:9. When fitting content into a box of another ratio there are two ways: fit, which keeps everything and produces bars (letterbox top and bottom, pillarbox on the sides), or fill, which covers the box and crops the excess. A 16:9 clip in a 4:3 box, for example, loses 25% of its width when filled.

Worked examples

16:9 video in a 4:3 box

Input: Caixa 1600 x 1200, conteúdo 16:9
Expected output: Caber: 1600 x 900, tarjas de 150 px em cima e embaixo

Filling the same box crops 25% of the width.

Resizing 1920x1080

Input: Largura nova: 1280
Expected output: Altura nova: 720

The 16:9 ratio is preserved and the image is not distorted.

Full tool FAQ

How do I calculate an image's aspect ratio?

Divide width and height by their greatest common divisor. For 1920x1080 the divisor is 120 and the ratio is 16:9. The decimal, 1.7778, is width divided by height.

Why is 1366x768 shown as approximate?

How do I resize without distortion?

What is the Even rounding for?

What is the difference between letterbox and pillarbox?

What does Fill mean?

How do I use the ratio in CSS?

What is the aspect ratio of A4 paper?

Frequently asked questions

How do I use the ratio in CSS?

Use the aspect-ratio property, for example aspect-ratio: 16 / 9; on the element. The tool has a button that copies that line ready to paste.

What is the aspect ratio of A4 paper?

The A series (ISO 216) uses the square root of 2, about 1.414. The tool's A4 preset uses 2480x3508 px, which is A4 at 300 PPI.

Next steps

Continue in the tool

Open full tool

how to calculate aspect ratio

How to calculate the aspect ratio of a screen or image

From resolution to ratio and back

Divide width and height by their greatest common divisor (GCD). For 1920x1080 the GCD is 120, and 1920/120 = 16 and 1080/120 = 9, so 16:9. To resize, keep the ratio: new height = new width x 9 / 16. From a width of 1280 you get a height of 720. If the result is not a whole number, round it; for video, rounding to even is usually safest.

Not every resolution reduces to a well-known name. 1366x768 has an exact ratio of 683:384, within 0.1% of 16:9, which is why it is sold as 16:9. When fitting content into a box of another ratio there are two ways: fit, which keeps everything and produces bars (letterbox top and bottom, pillarbox on the sides), or fill, which covers the box and crops the excess. A 16:9 clip in a 4:3 box, for example, loses 25% of its width when filled.

Worked examples

16:9 video in a 4:3 box

Input: Caixa 1600 x 1200, conteúdo 16:9
Expected output: Caber: 1600 x 900, tarjas de 150 px em cima e embaixo

Filling the same box crops 25% of the width.

Resizing 1920x1080

Input: Largura nova: 1280
Expected output: Altura nova: 720

The 16:9 ratio is preserved and the image is not distorted.

Full tool FAQ

How do I calculate an image's aspect ratio?

Divide width and height by their greatest common divisor. For 1920x1080 the divisor is 120 and the ratio is 16:9. The decimal, 1.7778, is width divided by height.

Why is 1366x768 shown as approximate?

How do I resize without distortion?

What is the Even rounding for?

What is the difference between letterbox and pillarbox?

What does Fill mean?

How do I use the ratio in CSS?

What is the aspect ratio of A4 paper?

Frequently asked questions

How do I use the ratio in CSS?

Use the aspect-ratio property, for example aspect-ratio: 16 / 9; on the element. The tool has a button that copies that line ready to paste.

What is the aspect ratio of A4 paper?

The A series (ISO 216) uses the square root of 2, about 1.414. The tool's A4 preset uses 2480x3508 px, which is A4 at 300 PPI.