如何在CSS中擴展圖像以覆蓋頁面的整個寬度？

Question

我有一個圖像，它只是一個顏色過渡圖像（深藍色到淺藍色），但在左側有幾個圖形塊。

我使用的是width: 100%，這樣圖像就會從頁面的左側一直延伸到頁面的右側，並且工作正常。

但是，當瀏覽器窗口比頁面窄時，圖像總是停在瀏覽器窗口的最右側。然後，當我將水平滾動條向右移動時，圖像不會在頁面上延伸。它停止在瀏覽器窗口停止的地方。

CSS：

#header { 
    height:205px; 
    width:100%; 
    min-width:100%; 
    background-position:left top; 
    background-image:url(images/header.jpg); 
    background-repeat:no-repeat; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
} 

我試過width: auto和width和min-width各種組合：auto和100%。在所有情況下，當我滾動到右側時，圖像總是停在瀏覽器窗口最初的右側。如果我將瀏覽器窗口拉伸到足夠寬以顯示整個頁面，則該圖像應該顯示爲覆蓋整個頁面。當我將瀏覽器窗口縮小爲頁面寬度的一半時，圖像僅覆蓋頁面的一半（顯示在瀏覽器窗口中的部分）。然後，當我向右滾動時，圖像不再延伸到覆蓋整個頁面寬度。

即使瀏覽器窗口具有水平滾動條（無法顯示完整頁面而無需滾動右鍵），如何獲取圖像以覆蓋頁面寬度的全部100％？

Answer 1

您可以使用vw css單位，它指的是視口寬度的百分比。所以100vw = 100％的視口寬度。

#header { 
    height:205px; 
    width: 100%; /* fall back */ 
    width: 100vw; 
    background-position:left top; 
    background-image:url(images/header.jpg); 
    background-repeat:no-repeat; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    -o-background-size:cover; 
    background-size:cover; 
}