如果頁面寬度超過圖像寬度，我如何使橫幅圖像伸展以適合頁面的寬度？

（這是綠色的大橫幅圖像。）

現在我在寬度上限圖像在2560px，並且直到4K革命來臨時，應該是罰款。但是，如果有人出於某種原因（通過多臺顯示器？）將其伸展得更寬一些，我希望它不像目前那樣重複，但是要將圖像的寬度拉長以適合。

這是可能通過CSS來做，而不需要JavaScript？

那我SASS的一部分，只是看起來像這樣：

.banner { 
    @include box-shadow(rgba(0, 0, 0, 0.30) 0 4px 10px 0); 
    background: url(../images/banner-bg.jpg); 
    height: 522px;

我將如何做到這一點？

2013-07-19 Doug Smith

地址：

background-size: cover;

這可以確保圖像將覆蓋整個區域，在你的情況下，圖像將幾乎總是保持其高度，直到旗幟的寬度比圖像的原始寬度，那麼它將開始擴大以適應寬度。如果有人將他們的瀏覽器擴展到這個尺寸，但在這個寬度上沒有多大意義，它不會看起來很完美。

2013-07-19 00:54:55 Godwin

回答