Generate CSS aspect-ratio property values for perfectly proportioned, responsive containers — no JavaScript required.
CSS Aspect Ratio Generator
:
100%
Live Preview
16 : 9
Modern CSS — aspect-ratio
Recommended
Padding-bottom Hack
Legacy Fallback
How It Works
The modern aspect-ratio CSS property tells the browser to maintain a fixed width-to-height ratio as the element resizes. Set it on any block element and pair with width: 100% for a fully responsive container.
.video-container {
width: 100%;
aspect-ratio: 16 / 9;
}
The padding-bottom hack achieves the same result in older browsers (pre-2021) by exploiting how percentage padding is always calculated relative to the parent’s width, not height.
Common Ratios Reference
| Ratio | Use Case |
|---|---|
| 16:9 | HD video, YouTube embeds, widescreen |
| 4:3 | Classic TV, older presentations |
| 1:1 | Square images, Instagram posts |
| 21:9 | Cinematic/ultrawide hero banners |
| 9:16 | Mobile video, Stories, Reels |
| 3:2 | DSLR photos, card thumbnails |
Browser Support
aspect-ratio is supported by all modern browsers (Chrome 88+, Firefox 89+, Safari 15+, Edge 88+). For IE11 or older Safari, use the padding-bottom fallback generated above.
Related Tools:
- Aspect Ratio Calculator — Find the missing dimension from any ratio
- CSS Flexbox Generator — Build flexbox layouts visually
- Image Resizer — Resize images while preserving aspect ratio