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;

＆＃39; VH＆＃39;代表视口高度＆＃39;。它应该动态地将图像的高度设置为浏览器窗口的整个高度。

希望有所帮助。

垂直响应的背景图像

2 个答案: