垂直响应的背景图像

我有一个完整页面的背景图像（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

垂直响应的背景图像

回答

相关问题