CSS Aspect Ratio Calculator

Enter an original width and height to get the simplified ratio, decimal ratio, CSS aspect-ratio value, and a proportional new width or height.

Quick Facts

Formula
Ratio = width ÷ height, simplified with the greatest common divisor
1920×1080 shares a GCD of 120 with both numbers, giving 16:9.
CSS syntax
aspect-ratio: width / height;
Supported in all major browsers since 2021; keeps elements proportional without JavaScript.

Your Results

Calculated
Aspect ratio
-
Simplified width:height
Decimal ratio
-
Width ÷ height
Calculated dimension
-
Proportional size for the new value
CSS aspect-ratio value
-
Use as aspect-ratio: value;

Ready

Enter the original width and height, choose what to solve for, then press Calculate.

Understanding the CSS Aspect Ratio

An aspect ratio is the proportional relationship between an element's width and height, written as width:height (like 16:9) or as a single decimal (like 1.778). This calculator takes an original width and height, simplifies that ratio to its lowest whole-number terms, and — given a new width or height — computes the other dimension so the shape stays identical at any size.

The formulas

Three calculations do all the work:

  • Simplified ratio: divide both the width and height by their greatest common divisor (GCD). For 1920×1080, the GCD is 120, so the ratio simplifies to 16:9.
  • Decimal ratio: width ÷ height. 1920 ÷ 1080 = 1.778. This is the same number the CSS aspect-ratio property represents internally.
  • Proportional scaling: to find a new height from a known new width, multiply the original height by the new width divided by the original width — new height = new width × (original height ÷ original width). To solve the other direction, swap width and height in the formula.

Common aspect ratios

  • 16:9 — standard widescreen for HD/4K TVs, monitors, YouTube, most video content
  • 4:3 — older TVs and monitors; still used in some photography and presentations
  • 1:1 — square format; Instagram, profile photos
  • 9:16 — vertical (portrait) video; Instagram Reels, TikTok, YouTube Shorts
  • 21:9 — ultrawide monitor and cinematic format

Practical uses

  • Calculating the height of an image given a fixed width (or vice versa) without distortion
  • Cropping images to a target aspect ratio while maximizing pixel coverage
  • Ensuring video content dimensions match platform requirements before upload
  • Writing the CSS aspect-ratio property so a container reserves the correct space before an image or video loads, preventing layout shift

Frequently Asked Questions

How do I simplify an aspect ratio like 1920×1080?
Divide both numbers by their greatest common divisor (GCD). The GCD of 1920 and 1080 is 120, so 1920÷120 = 16 and 1080÷120 = 9, giving the simplified ratio 16:9.
What does the CSS aspect-ratio property do?
The CSS aspect-ratio property (aspect-ratio: width / height;) tells the browser to maintain a fixed width-to-height ratio for an element, such as an image or video container, even before the content loads. It has been supported in all major browsers since late 2021 and removes the need for old padding-hack tricks to prevent layout shift.
How do I find a proportional height for a new width?
Multiply the original height by the new width divided by the original width: new height = new width × (original height ÷ original width). For a 1920×1080 source scaled to an 800px width, the height is 800 × (1080÷1920) = 450px.
What are common aspect ratios used on the web?
16:9 is standard for HD/4K video and widescreen monitors, 4:3 is the older TV/monitor standard, 1:1 is square (profile photos, Instagram posts), 9:16 is vertical video (Reels, TikTok, Shorts), and 21:9 is used for ultrawide/cinematic displays.

Related calculators