What does this tool do?
Aspect Ratio Box generates ready-to-use CSS for any width-to-height ratio. You pick or type a ratio such as 16:9, see a live preview of how the box will look, and copy the CSS straight into your project. It is built for front-end developers styling responsive videos, images, and card components.
How to use it
- Adjust the values and options.
- See the result in the live preview.
- Copy the generated CSS/code into your project.
Two methods: modern and legacy
The tool outputs two CSS solutions. For modern browsers, the single-line aspect-ratio: 16 / 9 property is all you need. If you must support older browsers, it also includes a fallback using the padding-bottom hack: the box gets position: relative and a ::before pseudo-element receives a percentage padding-bottom. For 16:9 that value is 56.25%. Both blocks are copyable with a single click.
Presets and a live preview
Common ratios like 16:9, 4:3, 1:1, 21:9, 3:2, and 9:16 are one click away, and you can type any custom values too. Drag the width slider to watch the box height adjust in real time across different sizes. The preview shows the resulting pixel dimensions, so you know exactly how much space your design will occupy at a given width before you ship it.
Frequently asked questions
Why is the padding-bottom percentage needed?
In older browsers without aspect-ratio support, vertical padding is calculated relative to the element's width. That lets the box hold its ratio even with no content inside. The tool computes the value (height / width x 100) for you.
Are vertical (portrait) ratios supported?
Yes. You can pick or type ratios where height exceeds width, such as 9:16, and the generated CSS and preview update accordingly.
Is Aspect Ratio Box free?
Yes. Aspect Ratio Box and all 300+ tools on MagmaNex are completely free with no signup or account required.
Is my data safe?
Yes. Everything runs locally in your browser. The data you enter is never sent to a server, stored, or shared.
Does it work on mobile?
Yes. Aspect Ratio Box works on phones, tablets and desktops — no app download needed.
🔒 Privacy: everything runs in your browser, your data is never sent to a server.