Iframe reattivo (google maps) e ridimensionamento ridimensionabile

Question

Sto cercando di aggiungere una mappa Google al mio progetto, che dovrebbe essere reattivo. Ho usato lo stesso codice che funziona per le immagini ... Ma per qualche motivo, l'iframe della mappa si ridimensiona con le dimensioni che non ho scelto.

HTML

<iframe src="http://maps.google.com/maps/ms?vpsrc=6&amp;ctz=-480&amp;ie=UTF8&amp;msa=0&amp;msid=210840796990572645528.00049770919ccd6759de3&amp;t=m&amp;ll=30.751278,68.203125&amp;spn=84.446143,175.429688&amp;z=2&amp;output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300"> </iframe>​ 

e il CSS

iframe { 
max-width: 100%; 
height: auto; 
width: auto; /*IE8 bug fix*/ 
vertical-align: middle;} 

Oppure è possibile vederlo dal vivo e violino con esso qui: http://jsfiddle.net/corinne/pKUzU/ (se si taglia via il CSS, si vedrà che cosa intendo).

La mia domanda è come rendere questa iframe/mappa reattiva senza perdere l'altezza desiderata?

Answer 1

Questa soluzione è di Dave Rupert/Chris Coyier (credo). Richiede un wrapper div ma funziona piuttosto bene.

HTML

<div class="iframe-rwd"> 
     <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Seattle,+WA&amp;aq=0&amp;oq=seattle&amp;sll=37.822293,-85.76824&amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&amp;hnear=Seattle,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071" style="color:#0000FF;text-align:left">View Larger Map</a></small> 
    </div> 

CSS

.iframe-rwd { 
position: relative; 
padding-bottom: 65.25%; 
padding-top: 30px; 
height: 0; 
overflow: hidden; 
} 
.iframe-rwd iframe { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
}