[SOLVED] CSS scale height to match width - possibly with a formfactor

CSS scale height to match width - possibly with a formfactor

I have implemented a GoogleMapsV3 map in a twitterBootstrap basic responsive design site.

But my question is quite simple: i have:

<div id="map"></map>

and

#map{ width: 100%; height: 200px }

I'd like to be able to change the height to a form factor. Like in this "in my dreams CSS"

#map { width: 100%; height: width * 1.72 }

I have tried leaving out height, setting to auto, and all sorts of persentages - but only to make the div collapse on me always.

I have no problem writing a js-solution, but hope for a simple cleancut CSS solution, possible CSS3

If not possible, what would be the optimal way to js me out of this?? (timers, events...or the like)

Solution

For this, you will need to utilise JavaScript, or rely on the somewhat supported calc() CSS expression.

window.addEventListener("resize", function(e) {
    var mapElement = document.getElementById("map");
    mapElement.style.height = mapElement.offsetWidth * 1.72;
});

Or using CSS calc (see support here: http://caniuse.com/calc)

#map {
    width: 100%;
    height: calc(100vw * 1.72)
}