Aspect Ratio Calculator — Calculate Width, Height, and Ratios

An aspect ratio calculator finds the missing dimension when you know two of the three values: width, height, or ratio. If you know a video is 16:9 and the width is 1280px, the calculator tells you the height is 720px. If you have a 1920×1080 image and need to resize it to 800px wide, it tells you the height is 450px.

Use the Aspect Ratio Calculator to calculate dimensions and ratios instantly.

What aspect ratio means

Aspect ratio is the proportional relationship between width and height, expressed as width:height. A ratio of 16:9 means for every 16 units of width, there are 9 units of height.

The numbers themselves don’t specify size — just proportion. A 16:9 ratio applies to:

• 1280×720 px (720p)
• 1920×1080 px (1080p)
• 3840×2160 px (4K)
• 640×360 px (small video)

All are 16:9. The ratio stays constant while the actual pixel dimensions scale.

Common aspect ratios

Calculating dimensions from a ratio

Given a ratio (width:height) and one known dimension:

Find height from width:

height = width × (ratio_height / ratio_width)

Example: 16:9 ratio, width = 1280px
height = 1280 × (9 / 16) = 720px

Find width from height:

width = height × (ratio_width / ratio_height)

Example: 16:9 ratio, height = 1080px
width = 1080 × (16 / 9) = 1920px

Find the ratio from dimensions:

ratio = width / GCD(width, height) : height / GCD(width, height)

Example: 1920×1080
GCD(1920, 1080) = 120
ratio = 1920/120 : 1080/120 = 16:9

GCD = Greatest Common Divisor. For 1920 and 1080: GCD is 120, so the simplified ratio is 16:9.

The aspect ratio calculation formula

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

// Get simplified aspect ratio from dimensions:
function getAspectRatio(width, height) {
  const divisor = gcd(width, height);
  return `${width / divisor}:${height / divisor}`;
}

// Get height from width and ratio:
function getHeight(width, ratioW, ratioH) {
  return Math.round(width * ratioH / ratioW);
}

// Get width from height and ratio:
function getWidth(height, ratioW, ratioH) {
  return Math.round(height * ratioW / ratioH);
}

console.log(getAspectRatio(1920, 1080)); // "16:9"
console.log(getHeight(1280, 16, 9));     // 720
console.log(getWidth(1080, 16, 9));      // 1920

Aspect ratio in CSS

Maintaining aspect ratio with the aspect-ratio property

/* Modern approach — native CSS aspect-ratio: */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* Square element: */
.square {
  width: 200px;
  aspect-ratio: 1;  /* 1/1 = 1:1 */
}

/* 4:3 image container: */
.photo {
  aspect-ratio: 4 / 3;
}

The aspect-ratio property is supported in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+).

The padding-top hack (legacy)

Before native aspect-ratio, developers used padding-top percentage to maintain ratios:

/* 16:9 = 9/16 = 56.25% */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-top: 56.25%;  /* Creates 16:9 box */
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

The math: padding percentage is based on width. padding-top: 56.25% means the top padding equals 56.25% of the element’s width. For a full-width element, this creates a 16:9 box. For 4:3: 100 × 3/4 = 75%.

You don’t need this hack anymore — use aspect-ratio instead.

Aspect ratio in image design

Resizing without distortion

When resizing an image, maintain the aspect ratio by calculating the proportional dimension:

Original: 1800×1200px (3:2 ratio)
Target width: 800px

New height = 800 × (1200/1800) = 533px

Always scale proportionally. Changing just width or height without maintaining the ratio stretches or squishes the image.

Safe zones and cropping

Different aspect ratios crop different amounts of content. A landscape photo cropped to 1:1 (square) loses the sides. Designing images intended for multiple formats:

• Design with important content centered
• Keep faces and focal points within the “safe zone” of the most restrictive crop
• For thumbnails that may be cropped to different ratios, use a CMS that stores the original and generates crops

Aspect ratio in video production

YouTube videos must be 16:9 for full-screen display. Videos with other ratios get black bars (letterboxing for portrait, pillarboxing for landscape) or automatic cropping depending on the viewer’s setting.

TikTok/Instagram Reels/YouTube Shorts are optimized for 9:16 vertical video. 16:9 horizontal video appears smaller in these contexts.

Standard video resolutions by aspect ratio:

Related tools

• Aspect Ratio Calculator — calculate dimensions and ratios
• Aspect Ratios Explained — common ratios for video, photo, and web
• Image Compressor — optimize images after resizing