CSS aspect-ratio Calculator
aspect-ratio locks width and height together. Set 16 / 9 and the browser calculates height from width. No padding-top percentage trick or absolute positioning.
Configure
/
Simplified: 16 / 9 · padding hack: 56.25%
How the image fills the ratio box when content does not match.
Generated CSS
Modern CSS
Live Preview
'/%3E%3Ccircle cx='620' cy='140' r='90' fill='rgba(255,255,255,.25)'/%3E%3C/svg%3E)
aspect-ratio Browser Support
Widely availableSince 202195% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2021.
Safe to use without fallbacks.
88+
89+
15+
88+