html - 使谷歌地图响应和调整大小

Question

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