CSS Aspect Ratio Boxes

CSS Aspect Ratio Boxes

I had a little situation the other day where I needed to make one of those aspect-ratio friendly boxes. This isn't particularly new stuff. I think the original credit goes as far back as 2009 and Thierry Koblentz's Intrinsic Ratios and maintained popularity even for other kinds of content with articles like Uncle Dave's Ol' Padded Box.

[…]

So how do we figure out the padding-top for our 1127.34 × 591.44 SVG above?

[…]

FitVids is jQuery based, but there are vanilla JavaScript options, like this one by Ross Zurowski.

[…]

Tommy Hodgins has CSSplus which features Aspecty which is just for this, assuming you're cool with a JavaScript parsing and changing your CSS kinda thing:

[…]