title: CSS scale height to match width - possibly with a formfactor
body: <p>I have implemented a GoogleMapsV3 map in a twitterBootstrap basic responsive design site.</p>
  
  <p>But my question is quite simple: i have:</p>
  
  <pre><code>&lt;div id="map"&gt;&lt;/map&gt;
  </code></pre>
  
  <p>and</p>
  
  <pre class="lang-css prettyprint-override"><code>#map{ width: 100%; height: 200px }
  </code></pre>
  
  <p>I'd like to be able to change the height to a form factor. Like in this "in my dreams CSS"</p>
  
  <pre class="lang-css prettyprint-override"><code>#map { width: 100%; height: width * 1.72 }
  </code></pre>
  
  <p>I have tried leaving out height, setting to auto, and all sorts of persentages - but only to make the div collapse on me always.</p>
  
  <p>I have no problem writing a js-solution, but hope for a simple cleancut CSS solution, possible CSS3</p>
  
  <p>If not possible, what would be the optimal way to js me out of this?? (timers, events...or the like)</p>