响应iframe（谷歌地图）和奇怪的调整大小 [英] Responsive iframe (google maps) and weird resizing

问题描述

我想为我的设计添加一个Google地图，这应该是响应式的。我使用了相同的代码，为图像...但是由于某种原因，地图的iframe调整大小与我没有选择的尺寸。

HTML

 < iframe src =http://maps.google.com/maps/ms?vpsrc=6&ampzct -480& amp; ie = UTF8& amp; amp; amp; amp = m& amp; amp; amp; midid = 210840796990572645528.00049770919ccd6759de3& t = m& amp; ll = 30.751278,68.203125& amp; spn = 84.446143,175.429688& 2& amp; amp; output = embedframeborder =0marginwidth =0marginheight =0scrolling =nowidth =635height =300> < / iframe> 
  

和CSS

  iframe {
 max-width：100％; 
 height：auto; 
 width：auto; / * IE8错误修复* / 
 vertical-align：middle;} 
  

查看它的生活和摆弄它：
http://jsfiddle.net/corinne/pKUzU/
（如果你切掉CSS，你会看到我的意思）。

我的问题是如何使这个iframe /地图的响应，

这个解决方案来自Dave Rupert / Chris Coyier（我认为）。

 < div class =iframe-rwd> 
< iframe width =425height =350frameborder =0scrolling =nomarginheight =0marginwidth =0src =https://maps.google.com/ maps？f = q& amp; source = s_q& amp; hl = en& amp; ampococode =& amp; q = Seattle，+ WA& amp; aq = 0& amp; oq = seattle& amp; sll = 37.822293 ，-85.76824& amp; amp; sspn = 6.628688,16.907959& amp; amp; amp = amp; ie = UTF8& amp; hq =& amp; hnear = Seattle，+ King，+ Washington& amp; ll = 47.60621，-122.332071& amp; output = embed>< / iframe>< br />< small>< a href =https://maps.google.com/maps Σ f = q& amp; amp; source = embed& amp; hl = en& amp; ampoca =& amp; q = Seattle，+ WA& amp; aq = 0& amp; oq = seattle& amp; sll = 37.822293， -85.76824& amp; amp; sspn = 6.628688,16.907959& amp; t = h& amp; ie = UTF8& amp; hq =& amp; hnear = Seattle，+ King，+ Washington& amp; amp; z = 11& amp ; ll = 47.60621，-122.332071style =color：＃0000FF; text-align：left>查看大图< / 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％; 
} 
  

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.

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

and the CSS

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

Or you can view it live and fiddle with it here: http://jsfiddle.net/corinne/pKUzU/ ​(if you cut away the CSS, you will see what i mean).

My question is how to make this iframe/map be responsive without losing its wanted height?

解决方案

This solution is from Dave Rupert / Chris Coyier (I think). It requires a wrapper div but works pretty well.

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

这篇关于响应iframe（谷歌地图）和奇怪的调整大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！