CSS aspect-ratio: Responsive Media Without Padding Hacks
Replace the decades-old padding-bottom hack for maintaining aspect ratios with the native CSS aspect-ratio property. Covers responsive images, videos, and container sizing with clean modern CSS.
Key Takeaways
- For years, maintaining aspect ratios required the padding-bottom percentage hack — setting `padding-bottom: 56.25%` on a container for a 16:9 ratio.
- aspect-ratio: 1; /* Shorthand for 1 / 1 */
- Combine `aspect-ratio` with `object-fit` for responsive images that maintain their ratio without distortion:
- Setting `aspect-ratio` on images and videos reserves space before the content loads, eliminating Cumulative Layout Shift (CLS).
- The `aspect-ratio` property is supported in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+).
Media Query Generator
Generate responsive CSS media queries with device presets
The Padding Hack Is Dead
For years, maintaining aspect ratios required the padding-bottom percentage hack — setting padding-bottom: 56.25% on a container for a 16:9 ratio. This worked because vertical padding percentages are based on width, but the approach was confusing, fragile, and required inner wrapper elements. The native aspect-ratio property replaces it entirely.
Modern Syntax
.video-container {
aspect-ratio: 16 / 9;
width: 100%;
}
.square-avatar {
aspect-ratio: 1; /* Shorthand for 1 / 1 */
width: 4rem;
}
Common Aspect Ratios
| Ratio | Value | Use Case |
|---|---|---|
| 16:9 | 16 / 9 |
Video, hero images |
| 4:3 | 4 / 3 |
Classic photos, thumbnails |
| 1:1 | 1 |
Avatars, social media cards |
| 3:2 | 3 / 2 |
Photography, product images |
| 21:9 | 21 / 9 |
Cinematic banners |
| 9:16 | 9 / 16 |
Vertical video (Stories, Reels) |
Responsive Images
Combine aspect-ratio with object-fit for responsive images that maintain their ratio without distortion:
img {
aspect-ratio: 16 / 9;
width: 100%;
object-fit: cover;
}
Preventing Layout Shift
Setting aspect-ratio on images and videos reserves space before the content loads, eliminating Cumulative Layout Shift (CLS). Combine with width and height HTML attributes for maximum layout stability.
Browser Support
The aspect-ratio property is supported in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+). For the small percentage of older browsers, the padding-bottom fallback can coexist safely.