谷歌地图 iframe 响应问题

Question

我尝试让谷歌 iframe 地图具有响应性，但在移动设备上查看时，地图的大小保持不变，而不是调整大小。我已尝试多次替换代码（基于此处找到的答案），但没有找到解决我的问题的方法。如果有人能指出我的错误，将不胜感激。

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

HTML

<div class="col-lg-6 col-md-6 col-sm-12" class="google-maps">
  <iframe src="https://www.google.com/maps/d/embed?mid=1vQ8RDv0RplunNZfvdhgPTtCSjGA" width="600" height="450" frameborder="0" style="border:0"></iframe>

Answer 1

您需要为iframe 设置一些规则。通过设置一个绝对位置，我们告诉它它可以占用其父填充和高度的空间。要将 iframe 定位在父元素（cc-map-wrapper）中，我们使用 top 和 left 属性。最后，通过添加宽度和高度，我们获得了我们所追求的响应式外观。

.cc-map-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.cc-map-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} 

这是一个相关的 SO 票，讨论如何制作响应式 Google 地图：Responsive Google Map?

Answer 2

是否可以选择使用 Javascript？ 我只想制作 iframe width:100% 并使用 JS 根据您选择的宽高比设置高度。

例如你可以使用 jQuery：

$('.google-maps>iframe').height(
    $('.google-maps>iframe').outerWidth()*3/4
); //for a 4:3 aspect ratio