Bootstrap - 是否可以根据列大小调整图像大小？

Question

我正在使用Bootstrap创建一个图片库。全屏显示

最小尺寸看起来不错

但是在重新调整尺寸时，它会这样做

我希望第一张图片（树木）和第二幅图像（湖泊）一样宽，我尝试调整宽度/最大宽度，但问题是图像不能缩小当第二张图像准备好与第一张图像一致时。

当图像为col-sm-＃时，是否可以使图像具有一定的宽度;当设置为col-md时，可以使图像具有不同的宽度 - ＃？

Answer 1

考虑将两者设置为div上的背景图像封面。这将允许您在保留图像的正确宽高比的同时调整div的大小。

.yourdiv1{
  background: url(images/yourimage.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.yourdiv2{
  background: url(images/yourotherimage.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}