Aspect Ratio Calculator

How CSS Aspect Ratios Work: From the Padding Hack to Native Support

Aspect ratio control is one of the most practically important layout problems in web development. Every time a browser renders an image, video, or embedded iframe before it knows the content's dimensions, it must decide how much vertical space to allocate. Without guidance, the browser allocates zero height initially, then abruptly expands once the content dimensions load — producing the jarring layout jump that Google's Core Web Vitals team quantified as Cumulative Layout Shift (CLS), one of the three Page Experience ranking signals.

The pre-2021 solution was the "padding-top intrinsic ratio hack" — a CSS technique exploiting the CSS box model rule that percentage-based padding is always calculated relative to the element's width, not its height. By setting a container to position: relative with a calculated padding-top percentage (height ÷ width × 100), and absolutely positioning the content inside it at inset: 0, developers could force a responsive container to maintain any target ratio. A 16:9 container required padding-top: 56.25% (= 9/16 × 100). This worked perfectly but required wrapper divs and introduced accessibility complications with absolutely positioned content.

Before & After: Padding Hack vs Native CSS aspect-ratio

.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 16:9 */
}

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

.video-embed {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* No wrapper needed! Browser
     handles height automatically */
}

How Aspect Ratios Are Simplified: The GCD Algorithm

A raw dimension pair like 1920×1080 must be reduced to its simplest form (16:9) before it becomes usable as a CSS value. This simplification uses the greatest common divisor (GCD) algorithm — also known as the Euclidean algorithm. The algorithm works by repeatedly replacing the larger of the two numbers with the remainder of dividing the larger by the smaller, until one of them reaches zero. For 1920 and 1080: GCD(1920, 1080) → GCD(1080, 840) → GCD(840, 240) → GCD(240, 120) → GCD(120, 0) = 120. Dividing both dimensions by 120 yields 16:9. This tool performs this calculation automatically on every dimension input.

Aspect Ratio Use-Case Matrix

Aspect Ratio and Core Web Vitals: Fixing CLS

Cumulative Layout Shift (CLS) measures the total amount of unexpected visual displacement of page elements during loading. A perfect CLS score is 0.0 — meaning nothing ever moves after it first renders. Images, videos, and iframes without explicit dimensions cause the highest CLS scores because they load asynchronously, pushing content down when their natural dimensions become known. Setting explicit width and height HTML attributes on img elements, or applying CSS aspect-ratio to video iframes, gives the browser a dimension hint that it uses to pre-allocate the correct space before the media loads, achieving CLS scores of 0.0 even on media-heavy pages.

Common Mistakes & Troubleshooting

• ✕
  Using only height without width constraints: The aspect-ratio property requires the element to have a defined width (or flex/grid context) to compute height. If neither width nor height is explicitly constrained, the browser cannot apply the ratio.
• ✕
  Mixing aspect-ratio with explicit height: Setting both height: 200px and aspect-ratio: 16/9 creates a conflict. The explicit height wins, overriding the ratio. Only set one — prefer aspect-ratio for responsive layouts.
• ✕
  Forgetting width/height HTML attributes on img: The CSS aspect-ratio property works best when paired with HTML width/height attributes on img elements. This allows the browser to compute the ratio before the stylesheet even loads.