gpt4 book ai didi

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

转载 作者:数据小太阳 更新时间:2023-10-29 09:11:22 28 4
gpt4 key购买 nike

我正在尝试将 Google map 添加到我的设计中,这应该是响应式的。我使用了适用于图像的相同代码...但出于某种原因, map 的 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" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300">    </iframe>​

和 CSS

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

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

我的问题是如何使这个 iframe/map 具有响应性而不会丢失其所需的高度?

最佳答案

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

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: 56.25%;
height: 0;
overflow: hidden;
}
.iframe-rwd iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

关于css - 响应式 iframe(谷歌地图)和奇怪的调整大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12676725/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com