如何在窗口大小調整時使div的背景圖像縮小？

我的網頁上有一個div，圖片爲背景。當我縮小瀏覽器窗口時，圖像的右側部分被切斷。如何在窗口大小調整時使div的背景圖像縮小？

下面的代碼是在我的.css文件：

.captions { 
    max-width: 870px; 
    margin-top: 20px; 
    margin-bottom: 25px; 
    background-image: url('../images/0.png'); 
    height:20px; 
    background-repeat:no-repeat; 
}

這個代碼是在我的HTML頁面：

<div class="captions"></div>

可能有人請告訴我怎麼弄背景的寬度圖像在頁面大小調整時會縮小，以便始終顯示圖像的整個長度？

我對css很合理，對於代碼真的很感激。

謝謝大家提前。

來源

2014-03-27 RicSum

你有沒有嘗試過的寬度設置爲一個計算表達式？即'width：calc（100％）' - 這樣它總是包含窗口當前寬度的100％。 – DeeKayy90

使用背景大小的CSS3屬性。它可以讓你指定你想要的背景圖片的大小。在這種情況下，我們將它設置爲寬度和高度都爲100％（儘管您可能只想將其更改爲寬度）。並且將.captions容器設置爲100％寬度，以便相應地進行調整。

工作實施例：

.captions { 
    max-width: 870px; 
    margin-top: 20px; 
    margin-bottom: 25px; 
    background-image: url('../images/0.png'); 
    height:20px; 
    background-repeat:no-repeat; 
    background-size:100% auto; 
    width:100%; 
}

來源

2014-03-28 00:03:37 Martin

使用填充百分比來設定高，因爲padding-top和padding-bottom百分比被鏈接到容器的寬度。並且padding-top通過將圖像高度除以寬度來計算。

.captions { 
    background-image: url('http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png'); 
    background-size: 100%; 
    width: 100%; 
    padding-top: 29.8%; 
    height: 0; 
    text-indent: -9999px; 
}

See demo

來源

2014-03-28 01:54:30 newTag

如何在窗口大小調整時使div的背景圖像縮小？

回答

相關問題