div中的响应谷歌地图

我有一排三列。第一栏有一个响应式图片。第二列显示谷歌地图。我希望这张地图在高度和宽度上遵循与图片相同的行为。所以，当所有的列连在一起时，它们的高度相同，当屏幕变小并且列在其他列上移动时，谷歌地图应该跟随图片的宽度。这可能吗？div中的响应谷歌地图

下面是代码：

<!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>

感谢您的帮助。

EDIT

为了更清晰一点，这里是什么我打算做的图像，并且通过固定的高度的结果通过@MattiaNocerino的建议：宽度和高度上确定（1）但是2-3-4的高度没有反应，我希望它不会高于虚线以跟随图片的高度。

来源

2015-11-06 michltm

将宽度设置为自动，高度= 0和填补=作为图像的图像* 100 /高度的宽度。

检查这个小提琴！

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; 
}

来源

2015-11-06 18:17:39

谢谢您的回答，我编辑我的职务是在我的意图更加清晰。标签确实没有必要！ – michltm

检查编辑后的答案，现在应该可以！ –

优秀，那将做得很好。谢谢！ – michltm

div中的响应谷歌地图

回答

相关问题