谷歌地图iframe设置高度？

Question

我只想嵌入我的谷歌地图位置。当我使用 iframe 时，它​​的高度为 100%。当我设置高度时

.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 30% !important;
}

看起来是这样的。

地图大小看起来不错，但它在页脚之间使用了不需要的空白。这是我的 iframe

<div class="google-maps">
<iframe src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ-69Hn5JZ4joRzaymM3Zi2o8&key=AIzaSyDTljbjBpIX73t57vhNIhMKyk0u5p6MNGI" width="600" height="200" frameborder="0" style="border:0">
</iframe>
</div>

.google-maps {
    position: relative;
    padding-bottom: 77.4%;
    height: 0;
    overflow: hidden;
}

我只想显示地图的 30% 大小。我怎样才能存档它？

Answer 1

因为您使用“padding-bottom: 77.4%;”，所以您得到了空白。只需使用高度：30%；。