如何使Bootstrap img響應逗留在它的父div的邊界

使用Bootstrap 3，我試圖讓圖像保持在它的父div的邊界內。這適用於寬度，但無論我嘗試什麼，圖像始終脫離父div的底部，因爲當我降低瀏覽器高度時，它的高度不會更新。是否有可能做到這一點？如果是這樣，怎麼樣？謝謝。如何使Bootstrap img響應逗留在它的父div的邊界

的jsfiddle：http://jsfiddle.net/rensdenobel/9486t/

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-3 col-md-3 col-lg-4"></div> 
     <div class="col-xs-12 col-sm-6 col-md-6 col-lg-4 center"> 
      <div class="content"> 
       <div id="text">You chose this photo :</div>    
       <div id="thumbnail-container"> 
        <img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" /> 
       </div> 
       <div id="button-share"> 
         <button class="btn btn-success">Share it !</button> 
       </div>   
      </div> 
     </div> 
     <div class="col-sm-3 col-md-3 col-lg-4"></div>   
    <div> 
</div>

CSS：

html, body { 
    height:100%; 
} 

.container { 
    height:100%; 
    width:100%; 
    border:1px solid blue; 
} 

.row { 
    border:1px solid green; 
    height:100%; 
} 

.center { 
    display:table; 
    border:1px solid red; 
    padding-top:12px; 
    padding-bottom:12px; 
    text-align:center; 
    height:100%; 
    max-height:100%; 
} 

.content { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
    height:auto; 
    border:1px solid green; 
} 

#thumbnail-image { 
    margin-left:auto; 
    margin-right:auto; 
    height:auto; 
} 

#thumbnail-container{ 
    width:100%; 
    border:1px solid pink; 
    max-height:70%; 
    height:70%; 
    margin-top:12px; 
    margin-bottom:12px;  
}

來源

2014-02-13 Rens de Nobel

當我刪除表，它的作品http://jsfiddle.net/9486t/11/ –

嘗試

<div id="thumbnail-container col-sm-4 col-xs-4"> 
    <img id="thumbnail-image" class="img-responsive" src="http://placehold.it/800x800" /> 
</div>

變化col-sm-*和col-xs-*得到您想要的輸出

來源

2014-02-13 12:09:03 Arun

謝謝！似乎沒有工作，嘗試在小提琴：http://jsfiddle.net/rensdenobel/9486t/ –

http://bootply.com/113383運行它，然後單擊顯示器圖標。 – Arun

你使用什麼瀏覽器？當我調整屏幕大小時，高度比圖像小，圖像落在屏幕上。 –

如何使Bootstrap img響應逗留在它的父div的邊界

回答

相關問題