我怎樣才能使一個背景圖像scalebale

Question

我有一面旗幟div：

<div class="background" style="background: url(<%= @banner.image.url(:big) %>) no-repeat"></div> 

和相應的CSS：

#banner { 
    width: 100%; 
    height: 275px; 
} 

#banner .background { 
    width: 100%; 
    height: 275px; 
    background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -webkit-background-size: cover; 
} 

uploader.rb：

version :big do 
    process resize_to_fill: [1920, 280] 
end 

在較小的設備， background-image被裁剪，這裏是截圖。全寬：

與已縮放窗口：

有沒有什麼辦法，使圖像可調整大小的時候，屏幕寬度變窄？謝謝。

Answer 1

嘗試background-size: 100% auto;

Answer 2

只需使用background-size: contain這個

#banner .background { 
    background-size: contain; 
}