Aspect Ratio CSS Generator

In short The `aspect-ratio` property does what it says — `aspect-ratio: 16 / 9` on a container keeps that shape at any width — and it is supported everywhere that matters now. The padding-top fallback is worth understanding anyway, because it explains something genuinely counter-intuitive about CSS. A percentage padding resolves against the containing block's WIDTH, even for `padding-top` and `padding-bottom`. That is the whole trick: `padding-top: 56.25%` is 9/16 of the element's own width, so a zero-height box with that padding is always exactly 16:9, and an absolutely positioned child fills it. Almost nobody guesses that percentage vertical padding uses width; it is one of the odder corners of the box model and it powered every responsive video embed for a decade. What this actually prevents is layout shift. Without a reserved aspect ratio, an image or an embed has zero height until it loads and then suddenly pushes everything below it down — which is the single biggest contributor to a poor Cumulative Layout Shift score. Setting `width` and `height` attributes on an `<img>` achieves the same thing for images, and modern browsers use them purely to compute the ratio.