Aspect Ratios Cheatsheet

Ratio     Decimal    Usage
1:1       1.000      Square, Instagram post
4:3       1.333      Old TV, iPad
3:2       1.500      DSLR photos, Surface
16:9      1.778      Widescreen, YouTube
16:10     1.600      MacBook, Dell monitors
21:9      2.333      Ultrawide monitors
32:9      3.556      Super ultrawide
9:16      0.563      Mobile stories, TikTok
2:3       0.667      Portrait photos
3:4       0.750      Portrait tablet

Standard      Ratio    Resolution
HD (720p)     16:9     1280 × 720
FHD (1080p)   16:9     1920 × 1080
QHD (1440p)   16:9     2560 × 1440
4K UHD        16:9     3840 × 2160
5K            16:9     5120 × 2880
8K UHD        16:9     7680 × 4320

WXGA          16:10    1280 × 800
WUXGA         16:10    1920 × 1200
MacBook Air   16:10    2560 × 1664
MacBook Pro   ~3:2     3024 × 1964

iPad          4:3      2048 × 1536
iPad Pro 11"  ~4.3:3   2388 × 1668
iPad Pro 13"  4:3      2732 × 2048

Ratio      Name              Usage
1.33:1     Academy          Classic 4:3 film
1.375:1    Academy Flat     Old Academy
1.43:1     IMAX             IMAX original
1.78:1     HD               Standard TV/web
1.85:1     US Widescreen    Theatrical
1.90:1     IMAX Digital     IMAX digital
2.00:1     Univisium        Netflix shows
2.20:1     70mm             Todd-AO
2.35:1     Scope            Anamorphic
2.39:1     Panavision       Modern anamorphic
2.76:1     Ultra Pana 70    Ben-Hur (1959)

Platform         Size (px)       Ratio
Instagram Post   1080 × 1080     1:1
Instagram Story  1080 × 1920     9:16
Instagram Reel   1080 × 1920     9:16
Facebook Post    1200 × 630      ~1.9:1
Facebook Cover   820 × 312       ~2.6:1
Twitter Post     1200 × 675      16:9
Twitter Header   1500 × 500      3:1
YouTube Thumb    1280 × 720      16:9
LinkedIn Post    1200 × 627      ~1.9:1
TikTok           1080 × 1920     9:16
Pinterest Pin    1000 × 1500     2:3

/* Modern CSS (well supported) */
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.square {
  aspect-ratio: 1;   /* same as 1/1 */
}

/* Old padding-bottom trick */
.ratio-16-9 {
  position: relative;
  padding-bottom: 56.25%;  /* 9/16 = 56.25% */
}
.ratio-16-9 > * {
  position: absolute;
  inset: 0;
}

/* Common padding-bottom values */
1:1   → 100%
4:3   → 75%
3:2   → 66.67%
16:9  → 56.25%
21:9  → 42.86%

# Width from height:
width = height × ratio
width = 1080 × (16/9) = 1920

# Height from width:
height = width / ratio
height = 1920 / (16/9) = 1080

# Padding-bottom %:
padding = (height / width) × 100
padding = (9 / 16) × 100 = 56.25%

# Diagonal (Pythagorean):
diagonal = √(width² + height²)
27" 16:9 → 23.5" × 13.2"