CSS scale height to match width - possibly with a formfactor

Solution 1:

Here it is. Pure CSS. You do need one extra 'container' element.

The fiddle

(tinkerbin, actually): http://tinkerbin.com/rQ71nWDT (Tinkerbin is dead.)

The solution.

Note I'm using an 100% throughout the example. You can use whichever percentage you'd like.

Since height percentages are relative to the height of the parent element, we can't rely on it. We must rely on something else. Luckily padding is relative to the width - whether it's horizontal or vertical padding. In padding-xyz: 100%, 100% equals 100% of the box's width.

Unfortunately, padding is just that, padding. The content-box's height is 0. No problem!

Stick an absolutely positioned element, give it 100% width, 100% height and use it as your actual content box. The 100% height works because percentage heights on absolutely positioned elements are relative to the padding-box of the box their relatively positioned to.

HTML:

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

CSS:

#map_container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
}

#map {
  position: absolute;
  width: 100%;
  height: 100%;
}

Solution 2:

You could try using vw for height. https://developer.mozilla.org/en/docs/Web/CSS/length

Something like

div#map {
     width: 100%;
     height: 60vw;
}

This would set the width of the div to 60% of the viewport width. You will probably need to use calc to adjust to take padding into account …

Solution 3:

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)
}