Aspect Ratios Explained: A Complete Guide for Developers and Designers

An aspect ratio is the proportional relationship between a rectangle’s width and height, expressed as two integers reduced to their simplest form: width:height. A 1920×1080 frame simplifies to 16:9. A 2048×1365 photograph simplifies to 3:2. The actual pixel dimensions don’t matter to the ratio — what matters is the proportion.

Why does this come up constantly in development? Because every platform, screen format, and display context has an expected ratio. Ship a video at the wrong ratio and it letterboxes or crops. Design a thumbnail at the wrong proportion and the platform stretches it. Build an image component that doesn’t preserve ratio and everything distorts on resize.

This is the working guide to the ratios you’ll actually encounter, when each appears, and how to enforce them in CSS.

The major aspect ratios and where they appear

1:1 — Square

The equal-sided format. It’s a modern web standard because social platforms made it one: Instagram’s original square feed defined a generation of photo cropping decisions. Profile photos across nearly every platform are 1:1 (or cropped to circles, which are still sourced from square frames).

In CSS, 1:1 squares are trivial with the aspect-ratio property and come up constantly in avatar and thumbnail components:

.avatar {
  width: 48px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

For the object-fit behavior: images in a fixed-ratio container should almost always use object-fit: cover (fills the box, may crop) or object-fit: contain (shows the full image, may letterbox). Without it, the browser stretches the image.

4:3 — The old television standard

Before 16:9 became the widescreen standard, almost every television, computer monitor, and presentation used 4:3. You still encounter it in:

• iPad screens (10th gen iPad is 2360×1640, which is approximately 1.44:1 — close to 4:3 but not exact; earlier iPads were closer)
• Traditional photography presentation (slide projectors were 1:1.33, the 4:3 equivalent)
• Google Slides and LibreOffice Impress default presentation format
• Product photography on e-commerce sites (lots of catalog images are shot and cropped to 4:3)
• CCTV and security camera video feeds

4:3 feels “boxy” by modern standards because 16:9 widescreen became the baseline. If you’re building a video player or presentation tool and the content might be 4:3, your layout needs to handle both without distorting either.

16:9 — The widescreen standard

If you only learn one ratio, it’s this one. 16:9 is the baseline for:

• HD video in every form: 720p (1280×720), 1080p (1920×1080), 4K UHD (3840×2160)
• YouTube, Vimeo, and every major video platform’s default player
• All modern desktop monitors and televisions
• PowerPoint’s default since 2013
• Zoom and video conferencing
• Game streaming (Twitch, YouTube Gaming)

16:9 is so dominant in video that “responsive video embed” in CSS almost always means “maintain 16:9 regardless of container width.” This is where the padding-bottom trick originated and where the aspect-ratio property gets its most practical workout.

16:10 — Laptop screens

Slightly taller than 16:9, 16:10 appears in laptop displays where the extra vertical real estate helps with productivity work. MacBook displays have been 16:10 since the transition to Apple Silicon:

• MacBook Pro 14”: 3024×1964 (approximately 16:10.4)
• MacBook Pro 16”: 3456×2234 (approximately 16:10.3)
• MacBook Air 13”: 2560×1664 (exactly 16:10)

Many Chromebooks and Windows ultrabooks also ship 16:10 panels. For web development, this means the “above the fold” region is slightly taller than on a 1080p monitor. When designing full-viewport hero sections, test on 16:10 — a design perfectly tuned for 16:9 can look awkward when there’s extra vertical space.

3:2 — Photography

35mm film has a 36×24mm frame, which is exactly 3:2. This propagated to digital: most Canon and Nikon DSLRs and mirrorless cameras (the ones using a sensor derived from 35mm film dimensions) produce 3:2 images by default. Sony A7 series, Canon R series, Nikon Z series — all 3:2.

Common 3:2 pixel dimensions:

• 4500×3000 (common medium-resolution export)
• 6000×4000 (24MP full-frame)
• 7952×5304 (42MP, Sony A7R IV)

When you’re building image galleries, blog post headers, or photography portfolio sites, 3:2 is the format the images arrive in unless the photographer cropped to something else. Forcing 3:2 images into a 16:9 container without object-fit will cut off the top and bottom; object-fit: cover handles this gracefully.

21:9 — Ultrawide

Ultrawide monitors typically run 3440×1440 or 2560×1080. 3440÷1440 = 2.39, which is close to but not exactly 21:9 (which would be 2.33). The “21:9” label is marketing shorthand for the ultrawide family.

Cinematic film uses a similar ratio: DCI 4K (4096×2160) is approximately 1.9:1, but anamorphic widescreen cinema (Scope format) at 2.39:1 is what gives movies that ultra-panoramic look with letterboxing on 16:9 displays.

For web design: ultrawide is a real viewport to test. Fixed-width centered layouts look fine; full-bleed background images at 16:9 will have horizontal black bars on a 21:9 monitor unless you use background-size: cover or object-fit: cover.

9:16 — Vertical video

16:9 rotated 90°. The format of smartphone video when you hold the phone upright, and the dominant format for short-form social:

• TikTok (1080×1920)
• Instagram Stories and Reels (1080×1920)
• YouTube Shorts (1080×1920)
• Snapchat (1080×1920)

For web, embedding vertical video in a landscape layout requires care. A 9:16 video in a full-width container will be enormous. Most implementations constrain the max-width and center the video:

.vertical-video-wrapper {
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 9 / 16;
}

2:1 — Wide banners

Twitter/X header images are 1500×500 (3:1, actually), but many platforms and UI elements use 2:1 for hero banners and wide thumbnails. Some phone screens (Samsung Galaxy S series in recent years) are 20:9, which is close to 2:1 at 2.22:1.

Open Graph images for social sharing (the image that appears when you link to a page) are often specified at 1200×630, which is approximately 1.9:1 — very close to 2:1 and the reason the “2:1 safe zone” advice circulates for OG images.

Common video resolutions and their ratios

Resolution	Name	Dimensions	Aspect Ratio
1280×720	HD / 720p	1280×720	16:9
1920×1080	Full HD / 1080p	1920×1080	16:9
2560×1440	QHD / 1440p	2560×1440	16:9
3840×2160	4K UHD	3840×2160	16:9
4096×2160	4K DCI (cinema)	4096×2160	~1.9:1 (not quite 16:9)
1280×800	WXGA	1280×800	16:10
2560×1600	WQXGA	2560×1600	16:10
1080×1920	Vertical FHD	1080×1920	9:16

Note: 4K DCI is not 16:9. It’s 4096×2160 = 256:135. YouTube’s “4K” is 3840×2160 (16:9 UHD), not DCI 4K. These are different things that get conflated in casual usage.

CSS techniques for maintaining aspect ratio

The old padding-bottom hack

Before CSS had native aspect ratio support, the trick was padding-bottom expressed as a percentage of the element’s width. CSS percentage padding is always calculated relative to the containing block’s width — which makes this work:

/* 16:9: (9/16) × 100 = 56.25% */
.video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

The math for other ratios:

4:3  → padding-bottom: 75%        (3/4 × 100)
1:1  → padding-bottom: 100%       (1/1 × 100)
3:2  → padding-bottom: 66.67%     (2/3 × 100)
21:9 → padding-bottom: 42.85%     (9/21 × 100)
9:16 → padding-bottom: 177.78%    (16/9 × 100)

This hack works in every browser back to IE8. You’ll still see it in legacy codebases and in some CSS frameworks that haven’t migrated to the native property yet.

The modern aspect-ratio property

The aspect-ratio CSS property shipped in all modern browsers in 2021 (Chrome 88, Firefox 89, Safari 15). As of 2026, global support is above 96% and it’s safe to use without a fallback for any site not targeting very old browsers.

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

/* Square avatar */
.avatar {
  width: 64px;
  aspect-ratio: 1 / 1;
}

/* 3:2 photo card */
.photo-card {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}

The aspect-ratio property sets the preferred ratio. If you set both width and height explicitly, aspect-ratio is ignored. If you set only one dimension, aspect-ratio computes the other. For responsive containers where only width is set, this is exactly what you want.

Controlling image and video fill with object-fit

Once you have a fixed-ratio container, the content inside needs to fill it without distortion:

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* fills box, crops edges */
  object-position: center; /* crop from center */
}

object-fit values:

Value	Behavior	Common use
cover	Fills box, maintains ratio, may crop	Thumbnails, hero images, avatars
contain	Fits inside box, maintains ratio, may letterbox	Product images, logos, diagrams
fill	Stretches to fill box, ignores ratio	Avoid — distorts content
none	Original size, no scaling	Pixel-art, icon sprites
scale-down	Smaller of none or contain	Small images in large containers

For iframes (YouTube embeds, maps), object-fit doesn’t apply — use the padding-bottom wrapper or aspect-ratio on the container with width: 100% on the iframe.

Why wrong ratios cause letterboxing or cropping

When a display frame and a content frame have different aspect ratios, one of two things happens: the content is scaled to fill one dimension and the other dimension either overflows (causing cropping) or falls short (causing letterboxing).

• Letterboxing — black bars added to fill the frame. Horizontal bars = top and bottom (pillarbox inverted). Vertical bars = left and right (pillarbox). You get this when playing a 4:3 video on a 16:9 screen at fit-to-height.
• Cropping — content outside the frame is removed. You get this when a platform auto-scales content to fill a fixed-ratio slot. Instagram’s old square feed cropped landscape photos from top and bottom.

The Aspect Ratio Calculator lets you enter any two dimensions and get back the simplified ratio, the decimal equivalent, and the equivalent dimensions at other standard sizes. Useful when you know your image is 3440×1440 and want to know whether it’s technically 21:9.

When building image upload flows that accept user content, always specify the expected ratio and offer in-browser cropping before upload. Accepting arbitrary ratios and then rendering them in fixed-ratio containers produces visual garbage at scale.

Further reading

• WCAG Contrast Explained — the other visual dimension that determines whether your interface is usable
• Hex, RGB, HSL, OKLCH: Which to Pick in 2026 — color format fundamentals alongside sizing and proportion
• Aspect Ratio Calculator — calculate ratios, find equivalent dimensions across sizes
• MDN: aspect-ratio — full property reference and browser compatibility table
• MDN: object-fit — fill behavior reference