响应式iframe(谷歌地图)和奇怪的大小调整
我正在尝试将Google Map添加到我的devise中,这应该是有回应的。 我使用了相同的代码来处理图像…但由于某些原因,地图的iframe调整了尺寸,我没有select。
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>
和CSS
iframe { max-width: 100%; height: auto; width: auto; /*IE8 bug fix*/ vertical-align: middle;}
或者你也可以在这里查看它的实际情况和摆弄它: http : //jsfiddle.net/corinne/pKUzU/ (如果你切掉了CSS,你会明白我的意思)。
我的问题是如何使这个iframe /地图响应,而不会失去其想要的高度?
这个解决scheme来自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&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
.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%; }