如何讓我的網站的背景圖像響應？

-4

我是網站開發新手。我需要使我的網站的背景圖像響應。我怎麼做？在手機上也應該看得很清楚。目前，我展示我的website的相關圖片如下：如何讓我的網站的背景圖像響應？

<img alt="Goodfoo.me" src="http://goodfoo.me/background.jpg" 
    id="full-screen-background-image" /> 
<style> 
#full-screen-background-image { 
    position: fixed; 
    top: 0; 
    left: 0; 
    min-width: 100%; 
} 
</style>

來源

2013-10-13 Freddy Brown

什麼是響應能力？你可以解釋嗎？ – VahiD

圖像將自行調整爲屏幕尺寸。例如，如果屏幕尺寸是1366 x 768，那麼它應該適合確切的屏幕，並且如果它的1024 x 768那麼它也應該適合這裏。 –

以及誰給它一個負面的投票..也感謝你！ –

如果你想要的形象佔據屏幕的整個寬度，只需設置width，而不是min-width，like this：

#full-screen-background-image { 
    z-index: -999; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
}

來源

2013-10-13 10:51:57 phihag

是的，這工作！謝謝Phihag .. –

沒有保證，它是有道理的做這種方式，將以下添加到您的CSS：

img { 
    max-width: 100%; 
    height: auto; 
}

但是要請注意，如果您打開真正的大屏幕上的頁面，就像電視一樣，它會因圖像未放大而失敗。如果您不介意升級造成的質量損失，只需刪除max-規則的一部分即可。這樣圖像總是以寬度方式填充容器。

請注意，這會影響頁面上的所有圖像。

來源

2013-10-13 10:51:40 Sven

這將匹配所有圖像，這幾乎肯定是一個壞主意。另外，如果屏幕寬度超過圖像寬度，則會在右側留出空白區域。 – phihag

@phihag你是對的，看我的編輯。 – Sven

如果你希望你的背景圖片適應屏幕，你可以使用

background-image { 
    width: 100%; 
}

在您的css

來源

2013-10-13 10:54:15 VahiD

如何讓我的網站的背景圖像響應？

回答

相關問題