CSS 响应式 iframe（谷歌地图）和奇怪的调整大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12676725/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsive iframe (google maps) and weird resizing
提问by Corinne
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.
我想在我的设计中添加一个谷歌地图，它应该是响应式的。我使用了与图像相同的代码......但由于某种原因，地图的 iframe 会根据我没有选择的尺寸调整大小。
HTML
HTML
<iframe src="http://maps.google.com/maps/ms?vpsrc=6&ctz=-480&ie=UTF8&msa=0&msid=210840796990572645528.00049770919ccd6759de3&t=m&ll=30.751278,68.203125&spn=84.446143,175.429688&z=2&output=embed" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" width="635" height="300"> </iframe>?
and the CSS
和 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).
或者您可以在此处实时查看并摆弄它：http: //jsfiddle.net/corinne/pKUzU/？（如果您去掉 CSS，您就会明白我的意思）。
My question is how to make this iframe/map be responsive without losing its wanted height?
我的问题是如何使这个 iframe/map 响应而不丢失其想要的高度？
回答by cpg
This solution is from Dave Rupert / Chris Coyier (I think). It requires a wrapper div but works pretty well.
这个解决方案来自 Dave Rupert / Chris Coyier（我认为）。它需要一个包装 div 但效果很好。
HTML
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&source=s_q&hl=en&geocode=&q=Seattle,+WA&aq=0&oq=seattle&sll=37.822293,-85.76824&sspn=6.628688,16.907959&t=h&ie=UTF8&hq=&hnear=Seattle,+King,+Washington&z=11&ll=47.60621,-122.332071&output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Seattle,+WA&aq=0&oq=seattle&sll=37.822293,-85.76824&sspn=6.628688,16.907959&t=h&ie=UTF8&hq=&hnear=Seattle,+King,+Washington&z=11&ll=47.60621,-122.332071" style="color:#0000FF;text-align:left">View Larger Map</a></small>
</div>
CSS
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%;
}
