垂直響應的背景圖像

我有一個完整頁面的背景圖像（10px），我希望無論瀏覽器的大小如何都圍繞圖像進行維護。到目前爲止，除了底部之外，每一方都很好。有沒有一種方法，我可以有一個垂直響應的背景圖像只使用CSS？我更喜歡不使用Javascript，但如果這是唯一的解決方案，我是開放的。垂直響應的背景圖像

.background-image { 
    display: inline-block; 
    height: 100%; 
    width: 98%; 
    margin: 1%; 
    background: url('/wp-content/themes/woodsy/images/background-walnut-test.jpg') no-repeat center center fixed; 
    background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    -webkit-background-size: cover; 
}

來源

2015-02-10 mirae2000

如果你想擁有同樣的1％作爲保證金的寬度，你只需要改變高度98％（如寬度）。

如果你想有完全10px的保證金，指定頁邊距，使用calc()設置寬度和高度：

margin: 10px; 
height: calc(100% - 20px); 
width: calc(100% - 20px);

看到它在這裏工作：http://jsfiddle.net/snvhbee7/

來源

2015-02-10 18:43:29

奇怪的計算函數適用於我的寬度，但不是我的身高。無論出於何種原因，我的背景圖片都不以百分比表示高度，僅表示實際尺寸。不管怎麼說，還是要謝謝你！ – mirae2000 2015-02-10 19:29:10

您還需要添加'position'（絕對或固定的） – 2015-02-10 20:03:00

我不知道我理解這個問題，但如果我這樣做，我想我確切知道你在找什麼。

而不是使用：

height: 100%;

嘗試：

height: 100vh;

'VH' 表示 '視口高度'。它應該將您的圖像的高度設置爲瀏覽器窗口的整個高度。

希望有所幫助。

來源

2015-02-10 18:48:42 theblackwidower

謝謝，這對我很好。現在研究瀏覽器支持。 – mirae2000 2015-02-10 19:27:49

有些單位，比如vmax在iphone safari中有大問題，我不確定vh – 2015-02-10 21:28:10

垂直響應的背景圖像

回答

相關問題