How to Calculate Aspect Ratio (Step-by-Step + Examples)

Need the answer fast? The aspect ratio is simply width ÷ height reduced to the smallest whole-number form W:H. Example: 1920×1080 → 16:9 using the GCD method. This guide shows every method—pixels, inches/cm, decimals, and even from a diagonal—plus a quick calculator and CSS tips.

Use our free Aspect Ratio Calculator to get instant results, then follow the steps below to understand the math and avoid common mistakes.

What is aspect ratio?

Aspect ratio expresses shape as width:height. If a rectangle is 16 units wide and 9 units tall, its aspect ratio is 16:9. Scale it to 32:18 and the shape is identical—only the size changes. That’s why aspect ratio is dimensionless and works the same for pixels, inches, or centimeters.

Quick formulas & definitions

• From pixels or size: ratioW = W / GCD(W,H), ratioH = H / GCD(W,H) → write as ratioW:ratioH.
• From decimal (W/H): multiply by a power of 10, round to integers, then reduce.
• From ratio to pixels: height = width × (q/p) or width = height × (p/q) for p:q.
• From diagonal + ratio p:q: width = d × p / √(p²+q²), height = d × q / √(p²+q²).

How to calculate aspect ratio (step-by-step)

1. Write your numbers as W:H (e.g., 1920:1080).
2. Find the GCD (Greatest Common Divisor) of W and H.
3. Divide both by the GCD to reduce to the smallest whole numbers.

Worked examples:

• 1920×1080 → GCD = 120 → 16:9
• 2560×1440 → GCD = 160 → 16:9
• 1200×800 → GCD = 400 → 3:2
• 1280×1024 → GCD = 256 → 5:4
• 3440×1440 → GCD = 80 → 43:18 (ultrawide)

Convert a decimal to a ratio

If you know W/H as a decimal (e.g., 1.777…), multiply to clear the decimal, then reduce.

1.777… ≈ 1777/1000 → reduce ≈ 16/9 → 16:9
1.333… = 1333/1000 → reduce ≈ 4/3 → 4:3
1.5     = 3/2 → 3:2

Calculate from diagonal size (TV/monitor)

Given diagonal d and ratio p:q:

width  = d × p / √(p² + q²)
height = d × q / √(p² + q²)

Example (27″ at 16:9): width ≈ 23.53″, height ≈ 13.24″.

Convert ratio ⇄ pixels

Ratio → pixels (given width)

For p:q and width W, height = W × (q/p). Example: 16:9 at 1200w → 1200 × 9/16 = 675 → 1200×675.

Pixels → ratio (reduce with GCD)

Example: 3840×2160 → GCD 240 → 16:9.

Fit vs. Cover (no distortion vs. full bleed)

When placing images/videos inside containers, you’ll often choose between:

• Contain (fit, no crop) – keeps entire image visible; may add letterboxing.
• Cover (fill, crop) – fills the box edge to edge; safe for hero banners when a bit of cropping is okay.

Keep aspect ratio in CSS

Modern way (aspect-ratio)

.media {
  width: 100%;
  aspect-ratio: 16 / 9; /* e.g., 16:9 */
  object-fit: cover;     /* contain for no crop */
}

Fallback (padding-top hack)

.ratio-box { position: relative; width: 100%; }
.ratio-box::before { content: ""; display: block; padding-top: calc(9 / 16 * 100%); } /* 16:9 */
.ratio-box > * { position: absolute; inset: 0; }

Common aspect ratios (cheat sheet)

Common mistakes & best practices

• Forgetting to reduce W:H to its smallest integers (e.g., 3840:2160 → reduce to 16:9).
• Mixing units: pixels vs. inches/cm. You can convert units, but the ratio doesn’t require it—just reduce the two numbers.
• Stretching instead of cropping: use object-fit: contain/cover or proper crop logic to avoid distortion.
• Using “near” ratios without noting it: some screens are slightly off a standard ratio. Document the exact result and round only when appropriate.

FAQ

Is aspect ratio the same as resolution?

No. Aspect ratio describes shape (e.g., 16:9). Resolution is total pixels (e.g., 1920×1080). Different resolutions can share one ratio.

How do I find aspect ratio from resolution quickly?

Use the GCD method: find the greatest common divisor of width and height, divide both, and write as W:H. Example: 3840×2160 → 16:9.

How do I convert 16:9 to exact pixels?

Multiply by a scale factor. If width must be 1280, height = 1280×(9/16) = 720 → 1280×720.

Does aspect ratio depend on units?

No. Whether you measure in pixels, inches, or centimeters, the simplified ratio is the same because it’s dimensionless.

What if my numbers don’t simplify nicely?

Reduce anyway (even if the numbers are large) or round to the closest common ratio (e.g., 16:9, 4:3) for design alignment.

Next step: Get instant answers with our Aspect Ratio Calculator and bookmark this guide for reference.