Aspect Ratio Calculator & Image Ratio Guide: How to Calculate & Check Image Aspect Ratio (16:9, 4:3, 1:1)

Whether you are cropping a hero banner for a responsive website, exporting a 16:9 YouTube thumbnail, checking the aspect ratio of an image from a DSLR camera, or preventing Cumulative Layout Shift (CLS) in CSS, understanding how to calculate aspect ratio and scale pixel dimensions proportionally is a core skill for designers and developers.

Use the interactive Aspect Ratio Calculator widget embedded below—or open the full Image Aspect Ratio Calculator & Ratio Checker—to compute ratios, inspect local image files, and resize dimensions without stretching.

1. What Is an Image Aspect Ratio?

An aspect ratio (or image ratio) describes the proportional relationship between an image's width and its height, expressed as two numbers separated by a colon (W:H) or as a decimal quotient (W ÷ H).

• Aspect Ratio is Independent of Total Resolution: A 1280 × 720 HD thumbnail, a 1920 × 1080 Full HD frame, and a 3840 × 2160 4K Ultra HD frame all share the exact same 16:9 aspect ratio (1.7778:1) because for every 16 units of horizontal width, there are 9 units of vertical height.
• Orientation Classification: When Width > Height (such as 16:9 or 3:2), the image is Landscape. When Height > Width (such as 9:16 or 4:5), the image is Portrait. When Width = Height (1:1), the image is Square.

2. How to Calculate Aspect Ratio from Width and Height (GCD Formula)

To calculate the aspect ratio of an image from its pixel width (W) and height (H), divide both numbers by their Greatest Common Divisor (GCD) using Euclid's algorithm:

// Euclidean Algorithm to find Greatest Common Divisor (GCD)
function getGCD(a: number, b: number): number {
  return b === 0 ? a : getGCD(b, a % b);
}

function calculateAspectRatio(width: number, height: number) {
  const divisor = getGCD(width, height);
  const ratioW = width / divisor;
  const ratioH = height / divisor;
  return {
    simplifiedRatio: `${ratioW}:${ratioH}`,
    decimalRatio: (width / height).toFixed(4)
  };
}

// Worked Example 1: 1920 × 1080 px
// GCD(1920, 1080) = 120  -->  (1920 / 120) : (1080 / 120) = 16:9 (1.7778:1)

// Worked Example 2: 1080 × 1350 px (Instagram Portrait)
// GCD(1080, 1350) = 270  -->  (1080 / 270) : (1350 / 270) = 4:5 (0.8000:1)

3. Standard Image, Video & Photography Aspect Ratios Reference Table

4. Proportional Resizing: Finding Missing Width or Height

When downsizing a high-resolution photo for the web, changing only one dimension without scaling the other causes distortion. Use these two equations—or our Image Dimension Calculator—to compute the exact matching pixel value:

• New Height = Math.round(Target Width × (Ratio Height ÷ Ratio Width))
• New Width = Math.round(Target Height × (Ratio Width ÷ Ratio Height))

5. Modern CSS aspect-ratio for Zero Layout Shift (CLS)

In modern frontend engineering, reserving an image's aspect ratio in CSS prevents page content from jumping while images download over mobile networks:

/* Reserve exact 16:9 widescreen box before the image loads */
.hero-thumbnail {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

Ready to check or resize your own assets? Open the Image Aspect Ratio Calculator & Ratio Checker, inspect display panels with the Screen Aspect Ratio Calculator, check raw file headers in the Image Dimensions Checker, or calculate print density in our 300 DPI to Pixels & PPI Calculator.