web-dev-qa-db-fra.com

Iframe réactif (google maps) et redimensionnement bizarre

J'essaie d'ajouter une carte Google Map à ma conception, qui est censée être réactive. J'ai utilisé le même code que celui utilisé pour les images ... Mais, pour une raison quelconque, l'iframe de la carte est redimensionné 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 tripoter ici: http://jsfiddle.net/corinne/pKUzU/ (si vous coupez le CSS, vous verrez ce que je veux dire).

Ma question est de savoir comment faire en sorte que cette iframe/carte soit réactive sans perdre sa hauteur souhaitée.

cssgoogle-mapsiframeresponsive-design
47
Corinne

Cette solution est de Dave Rupert/Chris Coyier (je pense). Cela nécessite un emballage mais ça 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%;
}
96
cpg