HomeDesign ToolsAspect Ratio Calculator

resize smart. keep proportions.

calculate aspect ratios and resize dimensions while keeping proportions. presets for 16:9, 4:3, 1:1, and more.

16:9
Width
Height
Width
Height
1920 x 1080

What this tool does

Calculate aspect ratios in either direction: enter width and height to see the simplified ratio, or enter a ratio and one dimension to compute the other. Useful for figuring out video container sizes, image crop targets, and CSS aspect-ratio values.

Common ratios and where they live

  • 16:9 — every YouTube video, every modern TV, every laptop screen, every PowerPoint slide. The default landscape ratio of the modern era.
  • 9:16 — vertical video. TikTok, Reels, Stories, phone-recorded video.
  • 4:3 — old TVs, classic computer monitors, iPad screens. Retro / nostalgic in 2026.
  • 1:1 — Instagram square posts, Twitter profile, most avatars. Symmetrical and platform- neutral.
  • 3:2 — DSLR camera native ratio. Print sizes 4×6, 6×9, 8×12.
  • 1.91:1 — Open Graph card preview ratio. Closer to 16:9 than 16:9.
  • 2.39:1 — anamorphic / cinematic widescreen. Common in film production.
  • 21:9 — ultrawide monitors, some cinematic TVs.

Why aspect ratio matters in CSS

Modern CSS has a native aspect-ratioproperty that constrains an element's shape regardless of its content:

css
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  /* height is computed automatically */
}

This replaces the older padding-bottom hack (padding-bottom: 56.25% for 16:9) that web developers used for two decades. The modern property is supported in every browser since 2021; the padding hack is no longer needed in new code.

How the calculation works

The simplification step uses Euclid's greatest common divisor algorithm. For an image at 1920×1080:

text
gcd(1920, 1080) = 120
1920 / 120 = 16
1080 / 120 = 9
Ratio: 16:9

For dimensions whose GCD is small or 1, the simplified ratio looks ugly (1037:781, for example). Most photo sensors produce output that simplifies to clean ratios because their pixel dimensions are designed around them.

What this tool does

Calculate aspect ratios in either direction: enter width and height to see the simplified ratio, or enter a ratio and one dimension to compute the other. Useful for figuring out video container sizes, image crop targets, and CSS aspect-ratio values.

Common ratios and where they live

  • 16:9 — every YouTube video, every modern TV, every laptop screen, every PowerPoint slide. The default landscape ratio of the modern era.
  • 9:16 — vertical video. TikTok, Reels, Stories, phone-recorded video.
  • 4:3 — old TVs, classic computer monitors, iPad screens. Retro / nostalgic in 2026.
  • 1:1 — Instagram square posts, Twitter profile, most avatars. Symmetrical and platform- neutral.
  • 3:2 — DSLR camera native ratio. Print sizes 4×6, 6×9, 8×12.
  • 1.91:1 — Open Graph card preview ratio. Closer to 16:9 than 16:9.
  • 2.39:1 — anamorphic / cinematic widescreen. Common in film production.
  • 21:9 — ultrawide monitors, some cinematic TVs.

Why aspect ratio matters in CSS

Modern CSS has a native aspect-ratioproperty that constrains an element's shape regardless of its content:

css
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
  /* height is computed automatically */
}

This replaces the older padding-bottom hack (padding-bottom: 56.25% for 16:9) that web developers used for two decades. The modern property is supported in every browser since 2021; the padding hack is no longer needed in new code.

How the calculation works

The simplification step uses Euclid's greatest common divisor algorithm. For an image at 1920×1080:

text
gcd(1920, 1080) = 120
1920 / 120 = 16
1080 / 120 = 9
Ratio: 16:9

For dimensions whose GCD is small or 1, the simplified ratio looks ugly (1037:781, for example). Most photo sensors produce output that simplifies to clean ratios because their pixel dimensions are designed around them.

more free tools

PDF utilities, image tools, developer helpers — all free, no signup.

Something wrong?