標籤: responsive

iframe 如何跟著 RWD 網站縮放

Monkianer

這個方法對與 iframe embed 的物件通通有效 (ex: Youtube……)

原理是使用 .google-maps 裡的 padding-bottom (或 padding-top 也可以) 屬性將 iframe 撐開，這裡使用 75% 是因為 iframe 起始值的 width 為 600 而 height 為 450，所以 height 永遠為 width 的 0.75 。

<style>
    .google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }
</style>

<div class="google-maps">
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
</div>

See the Pen Responsive Embed iframe by Monkianer (@monkianer) on CodePen.

當然因為這裡只是使用 CSS  來縮放，所以沒有辦法使地圖縮放後保持在原本的中心。如果要的話需要使用 google maps 的 API 才行，不過當然如果你使用了 Javascript 來控制地圖的話，你也可以乾脆使用 JS 來縮放你的地圖並保持在地圖的中心。