Aspect ratio calculator

An aspect ratio is width divided by height, written as two whole numbers. To reduce a size, find the greatest common divisor (GCD) of the two sides and divide both by it. To scale a size, keep the ratio and solve for the missing side.

ratio        = width ÷ gcd(width, height) : height ÷ gcd(width, height)
1920 × 1080  → gcd 120 → 16:9

new height   = new width × ratio height ÷ ratio width
1280 at 16:9 → 1280 × 9 ÷ 16 = 720

new width    = new height × ratio width ÷ ratio height
1920 at 9:16 → 1920 × 9 ÷ 16 = 1080

The same in JavaScript:

const gcd = (a, b) => (b ? gcd(b, a % b) : a);
const ratio = (w, h) => { const g = gcd(w, h); return `${w / g}:${h / g}`; };
ratio(1920, 1080);          // "16:9"
const heightFor = (w, rw, rh) => (w * rh) / rw;
heightFor(1280, 16, 9);     // 720

When the new side comes out as a fraction (1080 wide at 16:9 is 607.5 tall), the tool lists nearby sizes where both sides are whole pixels at exactly that ratio. Turn on "even numbers only" for video: H.264 and most other encoders with 4:2:0 chroma need even widths and heights.

Marketing names round. The exact reduced ratio tells you whether two sizes really scale into each other without cropping.

The aspect-ratio property has been supported in all major browsers since 2021. Set one side and the browser computes the other:

.video {
  width: 100%;
  aspect-ratio: 16 / 9;   /* "16 / 9", or a single number like 1.7778 */
}
.video iframe { width: 100%; height: 100%; }

/* Images: crop to the box instead of stretching */
.thumb { aspect-ratio: 1; object-fit: cover; width: 100%; }

• At least one of width or height must be automatic. If you set both, aspect-ratio does nothing.
• aspect-ratio: auto 16 / 9 uses an image's own ratio once it loads, and 16:9 until then.
• On <img> and <video>, the width and height attributes give the browser the ratio before the file loads, so the page does not jump (layout shift). Set them to the file's real size, then size the element with CSS.
• Before 2021 the trick was height: 0; padding-top: 56.25% (9 ÷ 16), because vertical padding in percent is relative to the width. The tool's "Old browsers" tab writes it for any ratio.
• Media queries can test the viewport: @media (min-aspect-ratio: 16/9) matches screens that are 16:9 or wider.
• Tailwind has aspect-video (16 / 9), aspect-square (1 / 1) and arbitrary values like aspect-[4/3].

Sizing images for the web? Convert them with the image converter, render SVGs at an exact size with SVG to PNG, or turn pixel sizes into rem with the PX to REM converter. More on design tools on DevHunt.