An aspect ratio describes the proportional relationship between a rectangle's width and height. 16:9 means for every 16 units of width there are exactly 9 units of height — whether those units are pixels, millimeters, or inches. Simplifying dimensions to a ratio uses the greatest common divisor (GCD); finding a missing dimension from a known ratio uses proportional scaling.
The formula
Simplify dimensions to ratio:
GCD(width, height) = greatest common divisor
ratio = (width / GCD) : (height / GCD)
Example: 1920 × 1080
GCD(1920, 1080) = 120
ratio = (1920/120) : (1080/120) = 16:9
Find a missing dimension from a known ratio (W:H):
Given width: height = width × (H / W)
Given height: width = height × (W / H)
Example: 16:9, width = 1200 px
height = 1200 × (9/16) = 675 px
Practical examples
Example 1 — Thumbnail for a YouTube video. YouTube recommends 1280×720 thumbnails. Verify the ratio: GCD(1280, 720) = 80 → 1280/80 : 720/80 = 16:9. Correct.
Example 2 — Resize a 4:3 image to fit a 16:9 frame at 1920 px wide. You want to know the letterbox bars. 4:3 height at 1920px wide: 1920 × (3/4) = 1440 px. The 16:9 frame height: 1920 × (9/16) = 1080 px. Letterbox bar height: (1440 − 1080) / 2 = 180 px top and bottom.
Example 3 — A3 paper aspect ratio. A3 is 297 × 420 mm. GCD(297, 420) = 21 → 297/21 : 420/21 = roughly 1:√2 (the ISO 216 standard ratio). Scaled precisely, it displays as approximately 99:140.
Common mistakes
- Reversing width and height. Aspect ratio is always width:height. A portrait phone display (1080×2340) has ratio 1080:2340 = 9:19.5, not 19.5:9. The first number is always the horizontal dimension.
- Using pixels instead of reduced ratio when specifying constraints. CSS
aspect-ratio: 16/9is correct. CSSaspect-ratio: 1920/1080also works, but is harder to read and non-portable. Always reduce to the simplest form. - Assuming 21:9 is exactly 21:9. Ultra-wide monitors vary: 2560×1080 = 64:27 (≈2.37:1), 3440×1440 = 43:18 (≈2.39:1), 3840×1600 = 12:5 (2.4:1). The "21:9" label is a marketing approximation, not a precise ratio.
International and regional variations
| Ratio | Decimal | Common use | Typical resolutions |
|---|---|---|---|
| 4:3 | 1.333 | Standard TV (pre-HD), iPad, some monitors | 1024×768, 1600×1200 |
| 16:9 | 1.778 | HDTV, YouTube, most monitors, smartphones (landscape) | 1280×720, 1920×1080, 3840×2160 |
| 16:10 | 1.6 | Laptop displays, some professional monitors | 1920×1200, 2560×1600 |
| 21:9 | ≈2.37 | Ultrawide monitors, cinema | 2560×1080, 3440×1440 |
| 1:1 | 1.0 | Instagram posts, profile pictures, square format | 1080×1080 |
| 9:16 | 0.5625 | Smartphone portrait, TikTok, Reels | 1080×1920 |
| 1:√2 | ≈1:1.414 | ISO 216 paper (A4, A3, A5) | — |