Responsive iframe (google maps) et redimensionnement bizarre

Question

J'essaie d'ajouter une carte Google Map à ma conception, qui est censée être réactive. J'ai utilisé le même code qui fonctionne pour les images... Mais pour une raison quelconque, l'iframe de la carte se redimensionne avec des dimensions que je n'ai pas choisies.

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>​

et le CSS

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

Ou vous pouvez le voir en direct et le manipuler ici : http://jsfiddle.net/corinne/pKUzU/ (si vous coupez le CSS, vous verrez ce que je veux dire).

Ma question est la suivante : comment faire pour que cet iframe/map soit réactif sans perdre la hauteur souhaitée ?

Answer 1

Cette solution est de Dave Rupert / Chris Coyier (je crois). Elle nécessite un div wrapper mais fonctionne plutôt bien.

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%;
}

Answer 2

Bon conseil !

Cela semble fonctionner sans qu'il soit nécessaire d'utiliser overflow:hidden. Surtout si vous avez défini overflow:hidden dans un élément parent, vous n`avez pas besoin de le répéter.

Pensez-y lorsque vous l'utilisez, car avec overflow:hidden sur .iframe-rwd aucun sous-menu déroulant ou autre élément ne peut être positionné au-dessus de l'option .iframe-rwd .