About this tool
Enter a width and height ratio to generate a responsive aspect-ratio box, with both the modern aspect-ratio CSS and a padding-top percentage fallback, all in your browser.
Frequently asked questions
Why include a padding-top fallback?
The padding-top percentage trick reproduces a fixed aspect ratio in older browsers that do not support the modern aspect-ratio property.
Is the ratio simplified?
Yes — values like 16 and 9 are reduced by their greatest common divisor, so 1920 by 1080 is shown as 16 / 9.