Page & Bell

Aspect Ratio Calculator

An aspect ratio is the proportional relationship between width and height, and every resize that ignores it produces stretched faces or squashed logos. This calculator solves the two problems that come up daily: given a locked ratio like 16:9 and one known dimension, find the other (cross-multiplication: new height = new width × original height ÷ original width); and given any pixel dimensions, reduce them to their simplest ratio using the greatest common divisor. It also emits ready-to-paste CSS for both the modern aspect-ratio property and the legacy padding-top fallback.

1280 × 720 px

Common resolutions for 16:9

WidthHeightName
854480480p (SD)
1280720720p (HD)
192010801080p (Full HD)
256014401440p (QHD)
384021604K UHD
768043208K UHD

CSS snippet

.box {
  aspect-ratio: 16 / 9;
}

/* legacy fallback (pre-2021 browsers) */
.box-legacy {
  position: relative;
  padding-top: 56.25%;
}

How to use the aspect ratio calculator

  1. Pick a preset chip (16:9, 4:3, 21:9…) or type the original width and height to lock the ratio.
  2. Enter the one dimension you know — the other is solved instantly, with exact and rounded values shown when they differ.
  3. Switch to Identify a ratio mode to reduce any W×H (like 1920×1080) to its simplest form and see the nearest common ratio.
  4. Copy the CSS snippet or read the common-resolution table for the active ratio.

The math: cross-multiplication and GCD

Two rectangles share an aspect ratio when W₁ ÷ H₁ = W₂ ÷ H₂. Solving for the unknown gives H₂ = W₂ × H₁ ÷ W₁ and W₂ = H₂ × W₁ ÷ H₁. To simplify a resolution to a ratio, divide both numbers by their greatest common divisor: gcd(1920, 1080) = 120, and 1920 ÷ 120 : 1080 ÷ 120 = 16:9. When the GCD is small the simplified form is useless on its own — gcd(1366, 768) = 2 yields 683:384 — so the tool also compares the decimal value against a list of common ratios and reports the nearest match with its percentage deviation.

Worked examples

  • Embed a 16:9 YouTube video at 760 px wide: 760 × 9 ÷ 16 = 427.5 → use 760×428 (or 760×427 if your encoder wants it shorter; both are within 0.12% of true 16:9).
  • Crop a 3:2 DSLR photo (6000×4000) to a 9:16 story: keeping the full 4000 px height, the frame only fits 4000 × 9 ÷ 16 = 2250 px of width — 37.5% of the original 6000. Nearly two-thirds of the shot is discarded, so compose with the centre in mind.
  • Legacy padding fallback for 21:9: padding-top = 9 ÷ 21 × 100 = 42.86%. For 4:3 it is 75%, for 1:1 exactly 100%.

Pitfalls worth knowing

Device pixels and CSS pixels differ: a phone advertising 1170×2532 renders a 390×844 CSS viewport at 3× density — design against the CSS size, export images at 2–3× for sharpness. Video encoders typically require even (sometimes mod-4 or mod-16) dimensions, so round to the nearest even number, not just the nearest integer. And anamorphic cinema ratios like 2.39:1 are conventions, not exact fractions — DCI scope 4K is 4096×1716, which is 2.387:1; treat the third decimal as noise.

Frequently asked questions

How do I calculate a missing dimension from an aspect ratio?

Cross-multiply. For a 16:9 video that must be 1280 px wide: height = 1280 × 9 ÷ 16 = 720 px. For a 4:3 image scaled to 900 px tall: width = 900 × 4 ÷ 3 = 1200 px. The calculator does this both directions and shows the exact decimal when the result is not a whole pixel — 1366 px wide at 16:9 gives 768.375 px, which you would round to 768.

Why does 1366×768 show as approximately 16:9 instead of exactly?

1366 ÷ 768 = 1.7786, while 16 ÷ 9 = 1.7778 — about 0.05% off. The GCD of 1366 and 768 is 2, so the true simplified ratio is the unhelpful 683:384. Manufacturers chose 1366 because it is divisible by 8 (a memory-alignment convenience), accepting the tiny mismatch. The calculator reports both the exact simplified ratio and the nearest common one.

What is the CSS aspect-ratio property and why did it replace the padding hack?

aspect-ratio: 16 / 9 tells the browser to derive one dimension from the other directly. Before it shipped (all major browsers by mid-2021), developers exploited the rule that percentage padding resolves against the parent width: a box with padding-top: 56.25% is always 9/16ths as tall as it is wide. The hack required a position:relative wrapper and an absolutely positioned child; aspect-ratio needs neither and works with min/max constraints.

Crop or letterbox — what should I do when the source and target ratios differ?

Cropping (CSS object-fit: cover) fills the frame but cuts content from the longer axis — a 16:9 video shown in a 1:1 slot loses 43.75% of its width. Letterboxing (object-fit: contain) preserves every pixel but adds bars. Crop for decorative imagery where composition tolerates loss; letterbox for screenshots, charts, and anything with text near the edges.

What aspect ratios do social platforms actually use?

Feed posts: 1:1 (1080×1080) or 4:5 vertical (1080×1350) on Instagram; landscape links commonly render near 1.91:1 (1200×630). Stories, Reels, Shorts, and TikTok are 9:16 (1080×1920). YouTube standard video is 16:9 (1920×1080). Uploading the wrong ratio means the platform crops for you — usually centre-weighted, often badly.

Why do I get a half-pixel result, and does rounding break the ratio?

Ratios rarely divide evenly: 1000 px wide at 16:9 gives 562.5 px. Screens render whole pixels, so you round to 562 or 563 — an error of about 0.09%, invisible in practice. The rounding toggle lets you choose; keep the exact value when feeding a video encoder that requires even dimensions (H.264 needs width and height divisible by 2, so prefer 1000×562 over 1000×563).

Related tools

Learn more