What does CSS aspect-ratio do?

It maintains an element's width-to-height proportion. Set aspect-ratio: 16 / 9 and the element always stays at 16:9 regardless of its width. The height is calculated automatically.

Is aspect-ratio supported in all browsers?

Yes. Supported in Chrome 88+, Firefox 89+, Safari 15+, and Edge 88+. Universal browser support since 2021.

Does aspect-ratio replace the padding-bottom hack?

Yes. The padding-bottom percentage trick is no longer needed. aspect-ratio is cleaner, more readable, and doesn't require wrapper elements or absolute positioning.

How to Set CSS Aspect Ratio on Any Element

📐

Try CSS Aspect Ratio

Free, no signup →