CSS Aspect Ratio Box Generator

The aspect-ratio property is the modern one-line approach and is widely supported in current browsers. The padding-top trick is the classic fallback that reserves height as a percentage of width, which still works in very old browsers that never shipped aspect-ratio.

It is the height divided by the width, times 100. For 16 by 9 that is 9 / 16 = 56.25%, which makes a wrapper that keeps the ratio as it grows. The comment in the generated code shows the reduced ratio next to the percentage.

The tool divides both numbers by their greatest common divisor so the printed ratio is the simplest equivalent. For 21 by 9 the divisor is 3, giving 7 / 3, which behaves identically but reads more cleanly in your stylesheet.

Padding reserves the space but leaves no box for content to flow into, so a child is positioned absolutely with top, left, width and height set to fill it. Put your image, video or iframe inside that child element.

Width and height each accept whole numbers from 1 to 100. Both must be positive integers, so decimals are rejected. If you need a ratio from pixel dimensions like 1920 by 1080, divide them down to small integers such as 16 by 9 first.

The rule targets a class called .aspect-box, and the padding version also styles .aspect-box > * for the child. Rename both selectors after pasting if that name clashes with your existing CSS, keeping the pair in sync.

For most projects the aspect-ratio property is cleaner and needs no wrapper child, so use it unless you must support browsers from before 2021. The padding-top fallback remains handy for email or legacy embed contexts where support is uncertain.

No. The CSS is generated in your browser and your width and height values are never uploaded, so you can use the tool offline once the page has loaded.