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