aspect ratio calculator

What an aspect ratio is

An aspect ratio is the relationship between the width and height of a rectangle, written as two numbers separated by a colon: 16:9, 4:3, 1:1, 21:9. The numbers are the smallest pair of integers that describe the shape. A 1920×1080 image, a 1280×720 image, and a 16×9 image all share the same aspect ratio — they’re scaled versions of the same shape.

Aspect ratios matter for video players, image containers, hero sections, responsive grids, and anywhere you need a shape to stay visually consistent while its absolute size changes. CSS’s aspect-ratio property accepts a ratio directly — aspect-ratio: 16 / 9 — making the calculator above the lookup you reach for when translating dimensions to that property.

How simplification works

To simplify a ratio, divide both numbers by their greatest common divisor (GCD). For 1920×1080: GCD(1920, 1080) = 120. Dividing gives 16:9. For 1280×720: GCD = 80, also 16:9. For 800×600: GCD = 200, giving 4:3. The calculator runs Euclid’s GCD algorithm and reports the result.

Dimensions that don’t simplify to a common named ratio (1234×891, for example) are reported in their fully-reduced form even if that form is awkward. If the simplified pair matches a known ratio — 16:9, 4:3, 21:9, 1:1, 3:2 — the calculator names it. Otherwise it labels the result as a custom ratio.

Worked examples

Common aspect ratios

The ratios you’ll encounter day-to-day in screens, video, and image production.

Common dimensions and their ratios

Real-world dimensions you might paste into the calculator above.

Using aspect ratios in CSS

Modern CSS has a dedicated property for this. Once you know the ratio, you don’t need to set both width and height — set one and let the browser compute the other.

/* A responsive 16:9 video container */
.video {
  aspect-ratio: 16 / 9;
  width: 100%;
  /* height is computed from width × 9/16 */
}

/* A square avatar */
.avatar {
  aspect-ratio: 1 / 1;
  width: 64px;
}

/* An Instagram-portrait card */
.story {
  aspect-ratio: 9 / 16;
  width: 200px;
  /* height computes to ~356px */
}

Common mistakes

1. 1. Setting width and height separately and hoping they line up. Hand-calculated dimensions for a 16:9 box always have a fractional pixel somewhere. Use aspect-ratio CSS instead and let the browser handle the math.
2. 2. Confusing 21:9 with 64:27. True ultrawide monitor ratios are usually 64:27 (≈2.37:1) but everyone calls them 21:9 (≈2.33:1). Close, but not identical. The calculator returns the gcd-reduced form; the marketing label is what people remember.
3. 3. Rounding before simplifying. 720.5 × 405.28 simplified rounds-then-divides to weird numbers. Always work with the original integers, then simplify.
4. 4. Ignoring container constraints. aspect-ratio is a hint, not a hard constraint. A flex or grid parent can override it. If your aspect-ratio isn’t holding, check the layout context above the element.

Accessibility

Aspect ratio itself doesn’t affect accessibility, but the elements it shapes often do. Video and image containers should preserve aspect ratio across viewports so content isn’t cropped or distorted at smaller screen sizes — the aspect-ratio property handles this without needing the old padding-bottom hack and works with screen readers and zoom levels predictably.

For embedded video, always pair the ratio with proper captioning and a meaningful title attribute on the iframe. The container shape is one piece; the content inside has its own accessibility requirements.

FAQ

Related tools