响应式 iframe(谷歌地图)和奇怪的调整大小

Posted

技术标签:

【中文标题】响应式 iframe(谷歌地图)和奇怪的调整大小【英文标题】:Responsive iframe (google maps) and weird resizing 【发布时间】:2012-09-22 12:08:25 【问题描述】:

我正在尝试将谷歌地图添加到我的设计中,它应该是响应式的。我使用了适用于图像的相同代码...但由于某种原因,地图的 iframe 会根据我没有选择的尺寸调整大小。

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" margin margin scrolling="no"  >    </iframe>​

和 CSS

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

或者您可以在此处实时查看并修改它: http://jsfiddle.net/corinne/pKUzU/ ​(如果你去掉 CSS,你会明白我的意思)。

我的问题是如何让这个 iframe/map 在不失去其想要的高度的情况下做出响应?

【问题讨论】:

【参考方案1】:

这个解决方案来自 Dave Rupert / Chris Coyier(我认为)。它需要一个包装器 div,但效果很好。

HTML

    <div class="iframe-rwd">
        <iframe   frameborder="0" scrolling="no" margin margin 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: 56.25%;
height: 0;
overflow: hidden;

.iframe-rwd iframe 
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

【讨论】:

上面的代码将填满它的容器并保持它的原始纵横比。这对于响应式网格来说很好。您可以将其弹出到您喜欢的任何网格块中,它会自动调整大小,即使调整大小。 非常感谢,成功了,奇迹! :) 希望我能给你一些积分,但不幸的是我还是个新手! @cpg 你有这个代码的参考吗?试图更好地理解它。具体来说,它似乎不需要溢出:隐藏,可能是由于 iframe 的 100% 大小而工作? css-tricks.com/NetMag/FluidWidthVideo/… 看起来上面的 padding-bottom 可能有点可疑。似乎仍然有效,但可能需要多读一点。 也感兴趣:alistapart.com/article/creating-intrinsic-ratios-for-video

以上是关于响应式 iframe(谷歌地图)和奇怪的调整大小的主要内容,如果未能解决你的问题,请参考以下文章

可调整大小的响应式切换 iframe

重新加载谷歌地图

奇怪的PHP谷歌地图嵌入在iframe中的行为

调整谷歌地图标记的svg图标

动态调整 iframe 大小

如何使用 d3 创建响应式地图