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

问题描述

我正在尝试将 Google 地图添加到我的设计中，它应该是响应式的.我使用了同样适用于图像的代码......但出于某种原因，地图的 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&t=m&amp;ll=30.751278,68.203125&amp;spn=84.44645528.00049770919ccd6759de3&amp;t=m&amp;ll=30.751278,68.203125&amp;spn=84,447658142&amp;spn=84,447658142&amp;spn=84,4476581420" marginheight="0" scrolling="no" width="635" height="300"></iframe>

和 CSS

iframe {最大宽度:100%；高度:自动；宽度:自动；/*IE8错误修复*/垂直对齐:中间；}

或者您可以在此处实时查看并摆弄它:http://jsfiddle.net/corinne/pKUzU/(如果你剪掉 CSS，你就会明白我的意思).

我的问题是如何使这个 iframe/map 具有响应性而不失去其想要的高度?

解决方案

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

HTML

 
<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=&q=Seattle,+WA&amp;aq=0&amp;oq=seattle&sll=37.822293,-85.76824&amp;amp;;amp;sspn=6.628688,16.907959&amp;t=h&amp;ie=UTF8&amp;hq=&hnear=西雅图,+King,+Washington&amp;z=11&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=&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&hq=&hnear=西雅图,+King,+Washington&amp;z=11&amp;ll=47.60621,-122.332071" style="color:#0000FF;text-align:left">查看大图</a></small>

CSS

.iframe-rwd {位置:相对；填充底部:65.25%；填充顶部:30px；高度:0；溢出:隐藏；}.iframe-rwd iframe {位置:绝对；顶部:0；左:0；宽度:100%；高度: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屋！