我有一行三列。第一列有一张响应式图片。第二列显示谷歌地图。我希望这张 map 在高度和宽度方面遵循与图片相同的行为。因此，当所有列都排成一行时，它们具有相同的高度，并且当屏幕变小并且列在其他列之上时，谷歌地图应该遵循图片的宽度。 这可能吗？
代码如下:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://bootswatch.com /cerulean/bootstrap.css" ></link>
<link rel="stylesheet" href="https://bootswatch.com/assets/css/custom.min.css">
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(51.508742,-0.120850),
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<div class="panel panel-default well">
<div class="row">
<div class= "col-sm-4" style='background-color: white; overflow: hidden' >
<p>Column 1</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/HRSOA_AsherDurand-First_harvest_wilderness_1855.jpg/1280px-HRSOA_AsherDurand-First_harvest_wilderness_1855.jpg" alt="landscape" class="img-responsive" >
</div>
<div class= "col-sm-4" style='background-color: white;overflow: hidden'>
<p>Column 2</p>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</div>
<div class= "col-sm-4" style='background-color: white'>
<p>Column 3</p>
</div>
</div>
</div>
感谢您的帮助。
编辑
为了更清楚一点，这是我打算做的事情的图像以及按照@MattiaNocerino 的建议固定高度的结果:宽度和高度在 (1) 上没问题，但高度在 2 上没有响应-3-4 是我希望它不高于虚线以跟随图片的高度。
最佳答案
将宽度设置为自动，高度 = 0 和填充 = 作为图像的宽度 * 100/图像的高度。
检查这个 fiddle !
http://jsfiddle.net/jf70rsL5/1/
<div class="column">
<img src="http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg">
</div>
<div class="column">
<div id="map"></div>
</div>
<div class="column last"></div>
.column{
float:left;
width:30%;
margin-right:5%;
background-color: #f5f5f5;
height:300px;
}
img{
max-width:100%;
height: auto;
}
.last{
margin-right:0%;
}
#map{
width: auto;
height: 0;
padding-bottom: 56.247%; /*image width * 100 / height*/
background-color: #ccc;
}
关于css - div 中的响应式谷歌地图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33572599/