CSS

CSS setting the height of a DIV based on a ratio of the width

I had a situation where I needed to set the height of a multiple divs to be the same, but proportionate to its width. The application had gallery like page, which each item’s width based on a percentage of the window width. Each item had an image, with a set aspect ratio and a width set to 100%. In order to get the height to scale with the window width, here’s the CSS trickery I ended up using. Of course there are Javascript methods and other CSS hacks, this was the simplest in my opinion.