I was trying to do something fun for myself when I ran into the old aspect ratio problem. I wanted a div with a percentage-based width and a height that will update automatically while preserving a certain ratio.
Doing it for an image is really simple, for everything else not so much. While you can do it with only CSS, as seen in this StackOverflow question: How to maintain the aspect ratio of a div using only CSS, it's not neither intuitive, nor easy to use.
The accepted answer requires the use of padding and this affects the flow and the positioning of elements. It also means you have to determine the padding yourself and you cannot simply specify the ratio.
You simply declare the ratio as an attribute (
data-js-ratio) on the desired element and that's all.
<div style="width: 50%;" data-js-ratio="1.5"></div>
All it needs is a small initialisation call, preferably near the end of the page and you're good to go.
While it takes care of resizing itself if you play around with the window size, it does comes with an
update method, in case the element dimensions are changed dynamically. You can even overwrite the default ratio attribute.
I'm quite happy with the result. While the script itself is no big deal and something that pretty much anyone can code, it's already useful for me and now that it's done I can finally go back to what I initially wanted to do.