This writes the CSS for a box whose proportions must stay fixed, like a video embed or a thumbnail slot. Pick a common ratio or type your own numbers and you get both the modern aspect-ratio declaration and the legacy padding-top fallback.
aspect-ratio states the proportion as width and height separated by a slash. The fallback relies on percentage padding resolving against the parent width: height divided by width times 100 goes into padding-top, and the inner element is pinned to all four edges. The fallback sits inside @supports not, so it never applies in a browser that supports aspect-ratio. The property definition follows W3C CSS Box Sizing Level 4 (as of October 2026).
The fallback spells out top, right, bottom and left instead of using inset. The ratio box assumes a single element inside; stacked layouts and responsive image srcset generation are not supported. The preview is drawn through whichever modern path this browser supports.
Frequently asked questions
Percentage padding resolves against the parent's width. Feeding it the height-to-width ratio therefore produces a height proportional to the width.
Current major browsers support aspect-ratio. The fallback is wrapped in @supports, so a supporting browser ignores it and keeping it costs nothing.
Yes. When both values are integers the code is written in the form reduced by their greatest common divisor, and the result shows both before and after.