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中的響應谷歌地圖

回答

相關問題