html - Bootstrap - 图像被拉伸(stretch)到 div 的宽度

Question

我有一个调整大小的图像网格(原始图像比使用 Bootstrap 适合网格设置的图像要大。

我遇到了一个问题，如果我减小窗口的宽度，而不是保持相同的调整大小并响应较小的宽度，每个图像都会被拉伸(stretch)(大于其原始尺寸)以适应宽度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;
}

容器的最大宽度为 1024px。

Answer 1

从 .image 类中删除最小宽度声明。

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

这是我在 Bootply 中的解决方案的标记。看起来工作正常。

http://www.bootply.com/rx9NWTMq9f