Aspect ratios: 16:9, 4:3, golden ratio, and where each fits

“16:9”, “4:3”, “golden ratio” — screen and image aspect ratios have shifted with technology. This article surveys the main ratios and where each fits.

Common aspect ratios

Ratio	Decimal	Where
1:1	1.000	Instagram, profile pictures
4:3	1.333	Old TV, early computer monitors
3:2	1.500	35mm film, DSLRs, mirrorless cameras
5:4	1.250	19” professional monitors
16:10	1.600	Transitional PC monitors
16:9	1.778	HDTV, modern monitors
21:9	2.333	Ultrawide monitors, cinema scope
Golden	1.618	Aesthetically favored

Why 16:9 became the standard

Most modern TVs and monitors are 16:9 because:

• HDTV standards — 1080p (1920×1080) and 4K (3840×2160) are 16:9.
• Eye geometry — human field of view is wider than tall.
• Compromise — between 4:3 and 21:9, with minimal cropping of films.

Even so, other ratios persist for specific uses.

4:3 to 16:9 transition

20th-century TV was 4:3:

• CRT physics — spherical glass tubes are easier to build near-square.
• Analog broadcast standard.
• Film legacy — 8mm and 16mm film were closer to 4:3.

HDTV adoption in the 2000s switched the world to 16:9, leaving older 4:3 content displayed with pillarboxes.

Photography’s 3:2

Inherited from 35mm film (24×36mm = 2:3). DSLRs and mirrorless cameras keep 3:2 as the standard.

• Print compatibility — 4×6 inch prints.
• Continuity with the photographic tradition.

Phone cameras let you choose 4:3 or 16:9 in addition.

Ultrawide: 21:9

Cinema scope (often actually 2.39:1) brought to PC monitors.

• Productivity — side-by-side windows.
• Video editing — long timelines.
• Gaming — wider field of view.

Most video content letterboxes on a 21:9 screen, so it’s a tradeoff for media consumption.

Golden ratio (1:1.618)

Mathematically “most aesthetic”, related to the Fibonacci sequence:

F(n+1) / F(n) → 1.618 as n grows

Applications:

• Design — logos, layout proportions.
• Architecture — Parthenon (debated).
• Typography — font-size scales (1.618×).

It’s overhyped, though. 16:9 or 3:2 often looks better than golden ratio depending on context.

1:1 (square)

Re-emerged in the 2010s with Instagram.

• Visually neutral in any orientation.
• Fits a phone screen completely.
• Easy to crop from either landscape or portrait sources.

Twitter/X profile avatars are also 1:1.

Computing aspect ratio

Reducing to lowest terms

For 1920 × 1080:

GCD(1920, 1080) = 120
1920 ÷ 120 = 16
1080 ÷ 120 = 9
→ 16:9

Divide both by the GCD.

Sizing

“Width 800, target 16:9”:

height = 800 × (9 / 16) = 450

In CSS, aspect-ratio: 16 / 9 derives the height from the width automatically.

CSS aspect-ratio

.video-frame {
	aspect-ratio: 16 / 9;
	width: 100%;
}

Browser support: Chrome 88+, Safari 15+, Firefox 89+. The padding-bottom hack is no longer needed.

Responsive ratios

A single hero ratio looks wrong across phones and ultrawide monitors:

• Too tall on mobile.
• Too short on a wide monitor.

Adjust with media queries:

.hero {
	aspect-ratio: 21 / 9;
}
@media (max-width: 768px) {
	.hero {
		aspect-ratio: 4 / 3;
	}
}

Or serve different art via <picture>.

Recommended ratios per platform

• YouTube: 16:9 (main), 9:16 (Shorts), 1:1 (experimental).
• Instagram: 1:1 (feed), 4:5 (recommended), 9:16 (Stories, Reels).
• TikTok: 9:16.
• Twitter/X: 16:9 (video), 3:1 (header).

The rise of vertical video (9:16) ended the “video = 16:9” era.

Summary

• 16:9 is today’s default; other ratios persist by use case.
• Golden ratio is aesthetic, not universal.
• CSS aspect-ratio makes layout sizing trivial.
• Vertical video drove diversification.

To compute ratios from arbitrary sizes or reduce them to simplest form, the aspect ratio tool on this site does both.