Gmap

[CSS小技巧]讓google map嵌入的iframe支援RWD

本文參考自這裡

原理是在iframe外面增加一個container,利用這個container來偵測區域尺寸

HTML內容如下:

<div class="iframe-rwd">
    <iframe ...></iframe>
</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%;
}