Aspect Ratio Calculator

How to use the aspect ratio calculator

1. Pick one of the Common ratios (16:9, 4:3, 21:9, 1:1, 9:16, 3:2, 16:10, 4:5), or type your own values in Ratio or original size. You can enter a ratio (16 and 9) or the real dimensions of an image, video or screen (1920 and 1080).
2. Read the results: the Simplified ratio, the Decimal ratio (width divided by height), the Orientation and the Nearest standard format. A “≈” sign means your size is close to, but not exactly, that standard.
3. Under New size (keeps the ratio), type a New width to get the matching height, or a New height to get the width. The line below shows the calculation. Uncheck Round to whole pixels if you need the exact value, for example for print sizes in millimetres.
4. Swap width and height turns a landscape ratio into portrait (16:9 becomes 9:16) and back.
5. The Preview draws a box with your ratio, and the table lists the size of every common ratio at your new width.
6. Copy the CSS code with Copy.

How the calculation works

An aspect ratio is the width divided by the height, written as two whole numbers. To simplify it, the tool divides both sides by their greatest common divisor (GCD): the GCD of 1920 and 1080 is 120, so 1920:1080 = 16:9. Decimal inputs are first multiplied by a power of ten (2.39:1 becomes 239:100).

To resize while keeping the proportions, it is a rule of three:

• new height = new width × original height ÷ original width
• new width = new height × original width ÷ original height

Example: a 16:9 video at 1280 px wide is 1280 × 9 ÷ 16 = 720 px high.

Some screens have “odd” ratios. A 1366 × 768 laptop simplifies to 683:384, which is 1.779:1, a hair away from 16:9 (1.778:1), hence “≈ 16:9”. Monitors sold as 21:9 are really 64:27 (2560 × 1080) or 43:18 (3440 × 1440), which is why both appear in the table.

The CSS aspect-ratio property

aspect-ratio: 16 / 9; tells the browser to compute the missing dimension: with width: 100%, the height follows automatically, and the box scales with its container. It works in every current browser (since 2021) and is ideal for video embeds, cards, image placeholders and thumbnails. Combine it with object-fit: cover on images to crop instead of stretching.

The code also includes the older padding-top technique as a fallback: a percentage padding is computed from the width, so padding-top: 56.25% (9 ÷ 16) reserves a 16:9 area, and the content is positioned absolutely inside it. You only need it for very old browsers.

Reserving the space with a ratio also prevents layout shifts while images and videos load, which improves the Cumulative Layout Shift (CLS) score.