使谷歌地图响应和调整大小答案

【问题标题】：Making google maps responsive and resizing使谷歌地图响应和调整大小
【发布时间】：2019-12-06 20:37:34
【问题描述】：

我正在尝试在我的页面上嵌入谷歌地图。我能够让它变得响应，但我似乎无法将它调整为更小。地图只是占据了太多的页面，我希望地图的高度只有一半。有没有办法让它的高度减半？我试图降低 iframe 中的高度，但这似乎不起作用。


<div class="googlemap-responsive">
   <iframe width='600' height='250' frameborder='0' scrolling="no" marginheight="0" marginwidth="0" src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387144.0075834208!2d-73.97800349999999!3d40.7056308!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1394298866288' ></iframe>
</div>

.googlemap-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.googlemap-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

【问题讨论】：

标签： html css google-maps

【解决方案1】：

在您使用的结构中，您唯一需要做的就是减少填充百分比。

尝试类似：

.googlemap-responsive {
   padding-bottom: 30%;
   // You can modify the percentage as your design requires.
}

一旦你这样做了，它占用的高度就会减少，并且会做出响应调整。

如果您要求尺寸始终为 200px，您可以执行以下操作：

.googlemap-responsive {
   padding-bottom: 200px;
   // You can modify the percentage as your design requires.
}

【讨论】：