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

谷歌地图iframe响应问题

2 个答案: