Html 谷歌地图iframe设置高度？

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

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

看起来是这样的

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

<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;
}

.谷歌地图{
位置：相对位置；
垫底：77.4%；
身高：0；
溢出：隐藏；
}

---

我只想显示地图大小的30%。如何存档？

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

因为使用了“填充底部：77.4%；”，所以得到的是空白。仅使用高度：30%

你也可以使用高度：30vh；它占据了用户设备屏幕高度的30%。啊，我没有注意到。谢谢你也可以使用高度：30vh；它占据了用户设备屏幕高度的30%。啊，我没有注意到。谢谢