Ratio Calculator: How Aspect Ratios Work in Web Design

An aspect ratio is the proportional relationship between a rectangle's width and height. It tells you the shape of a container, image, or video without specifying its actual size. Knowing that a video is 16:9 tells you it's wider than it is tall in a specific proportion; from there, any size can be derived. Aspect ratios come up constantly in responsive web design: maintaining them correctly prevents squished images, jumpy layout shifts, and broken video players.

The Ratio Calculator on DevToolShack simplifies and solves ratios in both directions: simplify a ratio to its lowest terms, or find a missing dimension when you know the ratio and one side. Here is the context that makes those calculations meaningful.

Common Aspect Ratios and Where They Appear

A handful of ratios are worth recognizing on sight:

• 16:9 — The standard widescreen ratio for video, YouTube embeds, HD monitors, and most modern displays. If you're embedding a video, assume 16:9 unless the source specifies otherwise.
• 4:3 — The older television and monitor standard. Still appears in some presentation slides and legacy video content.
• 1:1 — A perfect square. Used for profile pictures, social media post images (Instagram grid), and product thumbnail grids.
• 3:2 — The standard ratio of 35mm film and most DSLR cameras. Common for photography-focused sites and blog hero images.
• 2:1 — Twitter/X card images and some hero banner formats use this wider ratio.
• 9:16 — The vertical equivalent of 16:9. The standard ratio for mobile video, Instagram Stories, TikTok, and YouTube Shorts.
• 1200:630 (≈ 1.91:1) — The Open Graph image size recommended by Facebook and most social platforms. The Open Graph guide covers why this specific ratio matters for social sharing previews.

Maintaining Aspect Ratios in CSS

Before CSS got the aspect-ratio property, maintaining a ratio required a padding hack that was unintuitive but widely used. Both approaches are worth knowing.

The modern way: aspect-ratio

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

.profile-picture {
  width: 80px;
  aspect-ratio: 1; /* shorthand for 1 / 1 */
}

.hero-image {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover; /* on img elements, fills the space without distorting */
}

The aspect-ratio property is supported in all modern browsers and is the preferred approach for new code. It makes the intent explicit and is far easier to read than the padding hack.

The padding-bottom hack (for legacy support)

.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 9/16 = 0.5625 = 56.25% */
  height: 0;
}

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

The percentage comes from dividing height by width: 9 ÷ 16 = 0.5625. For a 4:3 ratio it would be 75% (3 ÷ 4). This technique works because percentage padding is calculated relative to the element's width, so padding-bottom at 56.25% of width creates a height that is always 56.25% of the width, which is exactly the 16:9 proportion.

Calculating a Missing Dimension

A common practical task: you know an image should be 16:9 and you know it needs to be 1200px wide. What height do you need?

height = width * (ratio_height / ratio_width)
height = 1200 * (9 / 16)
height = 1200 * 0.5625
height = 675

So a 1200×675 image is exactly 16:9. (The standard Open Graph image size of 1200×630 is close but not quite 16:9 — it's approximately 1.905:1, which is why social sharing images often look slightly different from video thumbnails even at the same width.)

For quick calculations without doing the math manually, the Ratio Calculator solves for the missing value when you provide the ratio and one dimension.

Simplifying Ratios

A ratio is in its simplest form when the two numbers share no common factor other than 1. To simplify, divide both numbers by their greatest common divisor (GCD).

// Euclidean algorithm for GCD
function gcd(a, b) {
  return b === 0 ? a : gcd(b, a % b);
}

function simplifyRatio(w, h) {
  const d = gcd(w, h);
  return `${w / d}:${h / d}`;
}

simplifyRatio(1920, 1080); // → "16:9"
simplifyRatio(1200, 630);  // → "40:21"
simplifyRatio(800, 600);   // → "4:3"

Knowing the simplified ratio of an image or container helps identify its format at a glance and makes it easier to maintain the correct proportions when resizing.

Aspect Ratios and CLS (Cumulative Layout Shift)

Aspect ratios have a direct impact on Core Web Vitals. When a browser loads an image without knowing its dimensions in advance, the page layout shifts as the image loads and takes up space. This layout shift contributes to the CLS score, which Google uses as a ranking factor.

The fix is simple: specify width and height attributes on every <img> element. Modern browsers use those attributes to calculate and reserve the correct aspect-ratio space before the image loads, preventing the shift. Combined with CSS height: auto, the image remains responsive while the browser knows the correct space to reserve.

<img src="hero.jpg" width="1200" height="675" alt="Hero image"
     style="width:100%; height:auto;">

The post on page speed audits covers CLS and other Core Web Vitals in more depth, including how to identify layout shift issues with Lighthouse and fix the most common causes.