使谷歌地图具有响应性和调整大小

Question

我正在尝试在我的页面上嵌入谷歌地图。我能够让它变得响应迅速，但我似乎无法将其大小调整为更小。地图占用了太多的页面，我希望地图的高度只有一半。有没有办法让它的高度减半？我试图降低 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;
}

Answer 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.
}