我正在使用引导程序并嵌入了 Google Maps API 3。
#map_canvas没有反应；这是一个固定的宽度。
另外，如果我使用height: auto并且width: auto地图没有显示在页面中。
为什么？
<style type="text/css">
body {
padding-top: 60px;
padding-bottom: 40px;
}
#map_canvas {
height: 400px;
width: auto;
}
</style>
<div class="container">
<div class="row">
<div class="span6">
<div id="map_canvas"></div>
</div>
</div>
</div>
已修订：官方帖子已过时，因此我更新了答案并改进了代码。
以下方法不需要引导程序或任何其他框架。它可以独立使用以使任何内容响应。通过计算对父元素应用填充aspect ratio。然后使用绝对位置将子元素放置在顶部。
的HTML：
<div class="iframe-container">
<!-- embed code here -->
</div>
CSS：
.iframe-container{
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Ratio 16:9 ( 100%/16*9 = 56.25% ) */
}
.iframe-container > *{
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
下面的“小提琴”有如何制作的例子：
这使用了固定纵横比为 16/9的 Bootstrap 的响应式嵌入功能：
<div class="embed-responsive embed-responsive-16by9">
<div id="map_canvas" class="embed-responsive-item" style="border: 1px solid black"></div>
</div>
使地图在高度和宽度上都调整大小：
http://niklausgerber.com/blog/responsive-google-or-bing-maps/
2018 年 9 月 27 日更新：据报道链接已关闭，不确定多少，所以我将我的网络存档搜索链接到他的 github：
https://github.com/niklausgerber/responsive-google-or-bing-maps
极其简单。使用 CSS 使地图相对于视口高度：
.map {
height: 80vh;
}
这指定 .map 容器必须是视口高度的 80%。
如果其他人看这个，就有这样的问题。
我有一个带有openstreet 地图的iframe，但我无法使其响应。我终于放了一个“img-responsive”课程，一切都很好。
<iframe class="img-responsive" width="350" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="YOUR OPENSTREET URL HERE" style="border: 1px solid black"></iframe>
自从提出这个问题以来已经 8 年了。
如果你们中的任何人仍在寻找解决方案但找不到，那就在这里。
添加width="100%"到谷歌地图iframe
<div class="row">
<div class="col-6">
<iframe src="SOURCE" width="100%" OTHER_ATTRIBUTES></iframe>
</div>
</div>
你可以给span6类一个宽度和高度，然后给map_canvas一个宽度和高度100%。
Smartik 的回答效果很好。我正在使用 gmaps4rails gem 并将这些更改应用于生成的 css，如下所示：
.map_container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
display: block;
}
.gmaps4rails_map {
display: block;
height: 400px;
}
然后将这些行添加到我的视图中：
<div class="map_container">
<div id="map" class="gmaps4rails_map">
<div id="map_canvas" class="span9">
<%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
</div>
</div>
</div>
<div class="map_container">
<div id="map" class="gmaps4rails_map">
<div id="map_canvas" class="span9">
<%= gmaps({"map_options" => { "type" => "ROADMAP", "center_longitude" => 180,"auto_zoom" => false, "zoom" => 16, "auto_adjust" => true}, "markers" => { "data" => @json }})%>
</div>
</div>
这篇博文有一个很好的解决方案。
在嵌入代码周围添加一个 div 标签。使用 CSS 类 map-responsive，这样你的代码现在看起来像这样：
<div class="map-responsive">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d386950.6511603643!2d-73.70231446529533!3d40.738882125234106!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNueva+York!5e0!3m2!1ses-419!2sus!4v1445032011908" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
现在在您的样式表文件之一中添加一些 CSS 属性：
.map-responsive{
overflow:hidden;
padding-bottom:56.25%;
position:relative;
height:0;
}
.map-responsive iframe{
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}
对于那些使用 javascript api（不是 iframe）嵌入的人：
<div class="googleMapContainer">
<div id="map"></div>
</div>
.googleMapContainer {
position: relative;
&:after {
content: "";
display: block;
padding-bottom: 100%;
}
}
#map {
position: absolute;
height: 100%;
width: 100%;
right: 0;
overflow: hidden;
}