引导 - 图像被拉伸到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