Aspect ratio is one of those concepts that feels obvious until you need to calculate it. You know that YouTube is 16:9 and that your old family photos look wrong on a widescreen TV, but when you need to resize a video or design a responsive image container, the math trips you up. This guide covers everything — from the definition to CSS implementation — with a free online calculator at the end.

Calculate aspect ratios instantly →

What Is an Aspect Ratio?

An aspect ratio expresses the proportional relationship between the width and height of a rectangle, written as width:height. A 1920×1080 display has an aspect ratio of 16:9 because both dimensions share a greatest common divisor of 120, and 1920÷120=16, 1080÷120=9.

The ratio describes shape, not size. A 640×360 thumbnail and a 3840×2160 4K monitor both have a 16:9 aspect ratio — they are the same shape at different scales.

Aspect ratios appear across:

  • Displays and monitors — screen resolution specs always imply an aspect ratio
  • Video production — export settings, platform upload requirements
  • Photography — sensor crop factors, print sizes
  • Web design — responsive image containers, embed wrappers
  • Mobile UI — safe area calculations, splash screen sizes

Common Aspect Ratios

16:9 — The Modern Standard

16:9 became the dominant widescreen standard because it is the geometric mean between 4:3 (the old TV standard) and 2.39:1 (cinema widescreen). It works well for both content types with minimal letterboxing or pillarboxing.

Used by: YouTube, Netflix, Vimeo, most laptop and desktop monitors, Full HD (1920×1080), 4K UHD (3840×2160), HD (1280×720).

4:3 — Legacy Television

The 4:3 ratio dominated television and computer monitors until the mid-2000s. It is squarer than 16:9, which makes it feel dated for video but appropriate for certain document and presentation layouts. PowerPoint’s original slide format is 4:3.

Used by: Legacy SD video, iPad (close at 4:3), some document layouts.

21:9 — Ultrawide

Ultrawide monitors use 21:9 (or more precisely 2.39:1 in cinema, and 64:27 for the 2560×1080 monitor standard). Cinematic films are often shot at 2.39:1 or 2.35:1, which is why streaming services show black bars on a standard 16:9 display.

Used by: Ultrawide gaming monitors (2560×1080, 3440×1440), cinematic film mastering.

1:1 — Square

The square format was popularized by Instagram’s original feed. It works well for profile images, album art, and social thumbnails where symmetry matters.

Used by: Instagram posts, app icons, album covers, avatars.

9:16 — Vertical Video

9:16 is the portrait inverse of 16:9 — designed for phones held vertically. As short-form video overtook horizontal platforms, 9:16 became the dominant format for mobile-first content.

Used by: TikTok, Instagram Reels, YouTube Shorts, Snapchat Stories, mobile fullscreen ads.

How to Calculate Aspect Ratio

The algorithm is:

  1. Find the greatest common divisor (GCD) of width and height using Euclid’s algorithm.
  2. Divide both dimensions by the GCD.

JavaScript:

function gcd(a, b) {
  return b === 0 ? a : gcd(b, a % b);
}

function aspectRatio(width, height) {
  const divisor = gcd(width, height);
  return `${width / divisor}:${height / divisor}`;
}

console.log(aspectRatio(1920, 1080)); // "16:9"
console.log(aspectRatio(2560, 1440)); // "16:9"
console.log(aspectRatio(1280, 960));  // "4:3"
console.log(aspectRatio(1080, 1920)); // "9:16"

Python:

from math import gcd

def aspect_ratio(width: int, height: int) -> str:
    divisor = gcd(width, height)
    return f"{width // divisor}:{height // divisor}"

print(aspect_ratio(1920, 1080))  # 16:9
print(aspect_ratio(3840, 2160))  # 16:9
print(aspect_ratio(1080, 1350))  # 4:5  (Instagram portrait)

For non-integer ratios (like 2.39:1), multiply both sides by a large integer (e.g., 100) before running GCD, then simplify.

Maintaining Aspect Ratio When Resizing

When you know the original dimensions and want to resize while maintaining the ratio, use the cross-multiplication formula.

Given width, find height:

newHeight = (newWidth × originalHeight) / originalWidth

Given height, find width:

newWidth = (newHeight × originalWidth) / originalHeight

Example: Original is 1920×1080. You want to resize to 1280 wide.

newHeight = (1280 × 1080) / 1920 = 720

Result: 1280×720, which is still 16:9.

In code:

function resizeByWidth(originalWidth, originalHeight, newWidth) {
  return Math.round((newWidth * originalHeight) / originalWidth);
}

function resizeByHeight(originalWidth, originalHeight, newHeight) {
  return Math.round((newHeight * originalWidth) / originalHeight);
}

// Resize 1920×1080 to fit within 800px width
const newH = resizeByWidth(1920, 1080, 800); // 450
console.log(`800×${newH}`); // 800×450

Aspect Ratios in CSS

CSS gives you two solid approaches for maintaining aspect ratios in responsive layouts.

The aspect-ratio Property

The modern way — supported in all current browsers (Chrome 88+, Firefox 89+, Safari 15+):

.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.square-thumbnail {
  width: 200px;
  aspect-ratio: 1;
}

.portrait-card {
  width: 300px;
  aspect-ratio: 9 / 16;
}

You can also use it to enforce a ratio while letting the browser handle the other dimension:

img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

The Padding-Top Hack (Legacy Support)

For older browser support, the intrinsic ratio technique uses padding-top as a percentage of the parent’s width:

.ratio-16-9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* (9 / 16) × 100 */
}

.ratio-16-9 > * {
  position: absolute;
  inset: 0;
}

The padding percentage formula: (height / width) × 100

Ratiopadding-top
16:956.25%
4:375%
1:1100%
9:16177.78%
21:942.86%

The aspect-ratio CSS property is now universally supported and should be preferred for new projects.

Responsive Embeds

A common use case is wrapping <iframe> embeds (YouTube, Vimeo, Google Maps) so they scale responsively:

<div class="embed-container">
  <iframe src="https://www.youtube.com/embed/..." allowfullscreen></iframe>
</div>
.embed-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

.embed-container iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

Calculate Aspect Ratio Online

Rather than doing the math by hand, ZeroTool’s Aspect Ratio Calculator handles it directly in your browser. Enter any two values — width, height, or a target dimension — and it calculates the ratio, the missing dimension, and the equivalent resolutions for common standards. No sign-up, no data sent to any server.

Try the ZeroTool Aspect Ratio Calculator →