CSS3背景大小「縮放」

我想實現一個完整的頁面背景圖像，如討論here。CSS3背景大小「縮放」

我正在使用第一種方法，CSS3技術。然而，當我使用background-size: cover像作者所建議的那樣，圖像被「放大」得遠遠超出它的需要，我不明白爲什麼。

這是一個圖像大小的問題還是我有其他問題？

是該頁面的鏈接。可實現我想查看整個樹，樹幹和所有。我已經嘗試將background-size設置爲「100％自動」，效果是一樣的。我也已經試過background-size「包含」，現在圖像太小了。

請不要JavaScript解決方案。我知道只用CSS即可實現。

UPDATE

含看起來在桌面網站不錯，但它看起來壞在電話/表。電話/桌面上的封面看起來不錯，但在桌面上很糟糕。我想我會用每個設備上看起來最好的那個？

UPDATE

我想我可以用全線包含，我只需要調整背景圖片爲更小的設備更薄。

2013-05-19 arb

結帳我附上的截圖，它在我的屏幕上看起來並不小。這取決於屏幕尺寸。 –

您可以使用不同背景的小設備，並使用媒體查詢來檢測它 –

變化background-size: cover到background-size: contain

它看起來完美的這種方式！

enter image description here

2013-05-19 13:30:50

它不適用於以前版本的ie – edd

@edd我不認爲原始海報關心IE他反正使用'背景大小' –

它的css3問題。我的錯 – edd

，我相信我們可以通過下面的兩個解決方案就足夠了這一要求：

一個。使用背景大小：100％100％;我可以使用此解決方案正確縮放圖像。 b。使用高度和寬度爲img的標籤爲100％

2015-04-23 07:32:45

回答