html - 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;
}