Bootstrap - 图像被拉伸到div的宽度

Question

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

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

Container的最大宽度为1024px。

Answer 1

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

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

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

http://www.bootply.com/rx9NWTMq9f

Answer 2

您的.image类具有基于百分比的动态宽度设置。它总是会根据它的容器而改变。

你有几个选择。

1. 删除min-width: 100%;这会将图片设置为其容器的大小。

2. 如果您希望它保持静止，请尝试将其更改为像素一样的固定测量值。