title: Responsive iframe (google maps) and weird resizing
body: <p>I am trying to add a Google Map to my design, that is supposed to be responsive. I've used the same code that works out for images... But for some reason, the map's iframe resizes with dimensions I didn't pick.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;iframe src="http://maps.google.com/maps/ms?vpsrc=6&amp;amp;ctz=-480&amp;amp;ie=UTF8&amp;amp;msa=0&amp;amp;msid=210840796990572645528.00049770919ccd6759de3&amp;amp;t=m&amp;amp;ll=30.751278,68.203125&amp;amp;spn=84.446143,175.429688&amp;amp;z=2&amp;amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300"&gt;    &lt;/iframe&gt;​
  </code></pre>
  
  <p>and the CSS</p>
  
  <pre><code>iframe {
  max-width: 100%;
  height: auto;
  width: auto; /*IE8 bug fix*/
  vertical-align: middle;}
  </code></pre>
  
  <p>Or you can view it live and fiddle with it here:
  <a href="http://jsfiddle.net/corinne/pKUzU/" rel="noreferrer">http://jsfiddle.net/corinne/pKUzU/</a>
  ​(if you cut away the CSS, you will see what i mean).</p>
  
  <p>My question is how to make this iframe/map be responsive without losing its wanted height?</p>