垂直響應的背景圖像

Question

我有一個帶有薄邊距（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; 
}

Answer 1

如果您想要與寬度具有相同的1％邊距，則只需將高度更改為98％（寬度為）。

如果要精確地有10px的邊距，請指定邊距，使用calc()設置寬度和高度：

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

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

Answer 2

我不確定我是否理解這個問題，但如果我這樣做，我想我確切地知道你在尋找什么。

而不是使用：

    height: 100%;

嘗試：

    height: 100vh;

'vh'代表'viewport height'。 它應該動態地將圖像的高度設置為瀏覽器窗口的整個高度。

希望有所幫助。