No Login Data Private Local Save

CSS Aspect Ratio Box Generator - Online Intrinsic Size

Developer Tools Generator aspect‑ratio box CSS generator
44
0
0
0
Configure Ratio

Choose a preset or set custom dimensions

W
:
H
150px 900px
Ratio Value: 1.778:1
Rendered Size: 500 × 281px
Live Preview

See how your aspect ratio box renders in a container

16:9
500 × 281px
Generated CSS

aspect-ratio is supported in all modern browsers (Chrome 88+, Firefox 89+, Safari 15+). Use the Padding Hack tab for legacy browser support.

Frequently Asked Questions

What is the CSS aspect-ratio property?

The aspect-ratio CSS property defines the width-to-height ratio of an element's box. It tells the browser to calculate the element's height based on its width (or vice versa), maintaining a consistent proportion. For example, aspect-ratio: 16 / 9 ensures the element stays at a 16:9 widescreen ratio regardless of container size.

How does aspect-ratio differ from using padding-top for intrinsic sizing?

The modern aspect-ratio property is a native CSS solution—cleaner, more readable, and doesn't require extra wrapper elements or absolute positioning. The older padding-top hack relies on the fact that vertical padding percentages are calculated based on the element's width, creating a fixed ratio box. While both achieve similar results, aspect-ratio is far simpler and works seamlessly with flexbox and grid layouts.

What is the padding-top hack and how does it work?

The padding-top hack uses the CSS rule that percentage-based padding is always relative to the element's width. By setting padding-top: 56.25% (for 16:9, since 9÷16×100=56.25) on a relatively positioned container and absolutely positioning the content inside, you create a box that maintains its aspect ratio. This technique was widely used before native aspect-ratio support became available.

Which browsers support the native aspect-ratio property?

aspect-ratio is supported in Chrome 88+, Firefox 89+, Safari 15+, and Edge 88+—covering approximately 96%+ of global web traffic as of 2024. For legacy browser support (mainly older Safari versions and IE), the padding-top hack remains a reliable fallback.

Can I use aspect-ratio with images and videos?

Absolutely! aspect-ratio works excellently with <img> and <video> elements. Combined with object-fit: cover or object-fit: contain, you can create responsive media containers that maintain perfect proportions while the content fills the available space. This is particularly useful for video embeds, thumbnail galleries, and hero images.

What happens if content overflows the aspect-ratio box?

If the content inside an aspect-ratio box is larger than the box itself, it will overflow by default. To handle this gracefully, add overflow: hidden to clip excess content, or use overflow: auto to add scrollbars. For images and videos, object-fit: cover is often the best solution—it scales the media to cover the box while maintaining its own aspect ratio.

How do I choose the right aspect ratio for my design?

Common ratios serve different purposes: 16:9 is standard for video and hero sections; 4:3 suits traditional photography; 1:1 works for profile images and social media thumbnails; 3:2 is classic for photo prints; 21:9 creates cinematic ultra-wide effects; 9:16 is ideal for mobile-first vertical content like Stories and Reels. Choose based on your content type and layout needs.

Does aspect-ratio work inside flexbox and CSS grid containers?

Yes—and this is one of its biggest advantages over the padding-top hack. aspect-ratio integrates seamlessly with modern layout systems. In flexbox, a flex child with aspect-ratio will maintain its proportions while flexing. In CSS Grid, you can combine aspect-ratio with 1fr tracks to create beautifully proportional responsive layouts without complex calculations.

🔧 Related Tools