Aspect Ratios Explained: From 16:9 to 1:1 and Beyond

Aspect Ratio = Width : Height

Example: 1920 × 1080 pixels
1920 : 1080 = 16 : 9 (simplified)

1920 × 1080
GCD of 1920 and 1080 = 120
1920 ÷ 120 = 16
1080 ÷ 120 = 9
Aspect ratio: 16:9

1920 ÷ 1080 = 1.778 (or just "1.78")

Width × Height → Ratio (approximate)
1920 × 1080 → divide both by ~100 → 19:10 ≈ 16:9
1080 × 1350 → 4:5 (divide by 270)

Want 16:9 at 1920px wide:
Height = Width × (9/16)
Height = 1920 × 0.5625 = 1080px

Want 16:9 at 1080px tall:
Width = Height × (16/9)
Width = 1080 × 1.778 = 1920px

1:1 (Square)
+-------+
|       |
|       |
+-------+

4:3 (Classic)
+---------+
|         |
|         |
+---------+

16:9 (Widescreen)
+-------------+
|             |
+-------------+

21:9 (Ultrawide)
+-----------------+
|                 |
+-----------------+

9:16 (Vertical)
+---+
|   |
|   |
|   |
|   |
+---+

/* Fixed aspect ratio container */
.video-container {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.square-image {
  aspect-ratio: 1 / 1;
  width: 200px;
}

.portrait-card {
  aspect-ratio: 4 / 5;
  width: 300px;
}

/* Percentage padding is relative to width */
.aspect-ratio-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 9/16 = 0.5625 = 56.25% */
}

.aspect-ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Maintain aspect ratio while being responsive */
.responsive-image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover; /* or 'contain' */
}

/* Image gallery with consistent sizing */
.gallery-item {
  aspect-ratio: 1 / 1;
  object-fit: cover;
  width: 100%;
}

/* Responsive YouTube/Vimeo embed */
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

/* Cover: fills container, may crop */
.image-cover {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center; /* control crop position */
}

/* Contain: shows all content, may letterbox */
.image-contain {
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000; /* letterbox color */
}

/* Fill: stretches to fill (distorts) */
.image-fill {
  aspect-ratio: 16 / 9;
  object-fit: fill;
}

Letterboxing (black bars top/bottom):
16:9 content in 4:3 container
+-------------+
|■■■■■■■■■■■■■|  ← black bar
|  content    |
|■■■■■■■■■■■■■|  ← black bar
+-------------+

Pillarboxing (black bars left/right):
4:3 content in 16:9 container
+---+---------+---+
| ■ | content | ■ |
+---+---------+---+

+---------------------------+
|                           |
|     +---------------+     |
|     |   SAFE ZONE   |     |
|     |  Important    |     |
|     |  content here |     |
|     +---------------+     |
|                           |
+---------------------------+

Content outside safe zone may be cropped on some platforms.

Shoot in 16:9 → Crop to:
- 16:9 (horizontal)
- 1:1 (square)
- 9:16 (vertical)
- 4:5 (portrait)

Campaign assets needed:
- Instagram Feed: 1:1 and 4:5
- Instagram Story: 9:16
- YouTube: 16:9
- Facebook: 1.91:1

/* Wrong: distorts image */
img {
  width: 400px;
  height: 300px;
}

/* Right: maintains ratio */
img {
  width: 400px;
  height: auto;
}

/* Or use object-fit */
img {
  width: 400px;
  height: 300px;
  object-fit: cover;
}

/* Focus on top (for portrait photos) */
img {
  object-fit: cover;
  object-position: center top;
}

/* Focus on specific point */
img {
  object-fit: cover;
  object-position: 30% 20%;
}

// Calculate height from width and ratio
height = width / (ratioWidth / ratioHeight)
height = width * (ratioHeight / ratioWidth)

// Calculate width from height and ratio
width = height * (ratioWidth / ratioHeight)

// Get ratio from dimensions
ratio = width / height

// Convert ratio to percentage (for padding hack)
percentage = (height / width) * 100