引導 - 圖像被拉伸到DIV

Question

我調整大小的圖像的網格的寬度（原始圖像是比將適合使用引導網格設置更大

我遇到一個問題，如果我。降低而不是保持相同的尺寸調整後的大小和響應較小寬度我的窗口的寬度，每個圖像被拉伸（小於它的原始尺寸大）以適合div的寬度。

任何幫助？

HTML：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-12 group"> 
     <h4>Unsorted Pictures</h4> 
     <div class="row"> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
     <div class="col-md-1"><img src="../img/image.jpg" class="image"></div> 
</div> 
</div> 
</div> 
</div> 

CSS：

.rectangle { 
    border: 1px solid black; 
} 

.group { 
    border: 1px solid black; 
    height: 300px; 
    overflow: scroll; 

    text-align: center; 
} 

.unsorted { 
    height: 190px; 
} 

.image { 
    min-width: 100%; 
    max-width: 100%; 
    height: auto; 
} 

容器包含1,024像素一個最大寬度。

Answer 1

您的.image類具有基於百分比的動態寬度集。它總是會根據它的容器而改變。

你有幾個選項。

1. 刪除min-width: 100%;這將圖像設置爲它的容器的大小。

2. 如果您希望它保持靜態，請嘗試將其更改爲像素等固定測量值。

Answer 2

從.image類中刪除最小寬度聲明。

.image { 
    /* min-width: 100%; REMOVE THIS */ 
    max-width: 100%; 
    height: auto; 
} 

這是您在我的Bootply解決方案中的標記。看起來它工作正常。

http://www.bootply.com/rx9NWTMq9f