What aspect ratio is
The aspect ratio is the proportion between width and height of an image, video or container. Expressed as two numbers separated by a colon: 16:9, 4:3, 1:1. One of the most practical concepts in visual design, video and web development.
Most common ratios
- 16:9: modern video standard (YouTube, TV, monitors).
- 4:3: legacy TV, classic PowerPoint slides.
- 1:1: square. Instagram feed, Spotify covers, avatars.
- 9:16: vertical for stories, TikTok, Reels.
- 21:9: cinematic ultrawide.
- 3:2: DSLR and mirrorless cameras.
- 2:3: posters and vertical covers.
CSS aspect-ratio
The aspect-ratio CSS property maintains a proportion without hacks. We used to need padding-bottom: 56.25% for 16:9. Now it's simply:
.video {
aspect-ratio: 16 / 9;
width: 100%;
}Full support in Chrome, Firefox, Safari and Edge since 2021. Define one side (typically width: 100%) and the other is computed automatically.
Use cases
- Video embeds: iframes that keep the right ratio when responsive.
- Responsive images: avoid layout shift while loading.
- Cards: news, products, posts with consistent thumbnail sizes.
- Galleries: grids where every item has the same proportion.
- Hero sections: precise control over hero dimensions.
Layout shift and aspect-ratio
Insert an image without width and height (or aspect-ratio), and the browser does not know how much space to reserve while loading. When it finishes, content jumps, causing layout shift (CLS — Cumulative Layout Shift). aspect-ratio fixes this: the browser reserves the right space from the start.
When you do NOT need aspect-ratio
If the image has width and height attributes in HTML (as it should), the browser already computes the ratio implicitly. The CSS property is useful for components without those attributes, or for iframes and embeds without fixed sizes.
Quick percentage conversions
For the legacy padding-bottom hack: 16:9 = 56.25%, 4:3 = 75%, 1:1 = 100%, 9:16 = 177.78%, 21:9 = 42.86%. Useful for ancient browser compatibility.