垂直响应背景图片答案

【问题标题】：Vertically responsive background image垂直响应背景图片
【发布时间】：2015-02-11 02:48:42
【问题描述】：

我有一个整页的背景图像，其边距很薄（10 像素），无论浏览器大小如何，我都希望在图像的每一侧都保留它。到目前为止，除了底部，每一面都很好。有没有一种方法可以让我只使用 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; 
}

【问题讨论】：

标签： javascript html css responsive-design

【解决方案1】：

如果您想拥有与宽度相同的 1% 边距，只需将高度更改为 98%（与宽度一样）。

如果你想正好有10px的边距，指定边距，使用calc()设置宽度和高度：

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

在这里查看它的工作原理：http://jsfiddle.net/snvhbee7/

【讨论】：

奇怪的是 calc 函数适用于我的宽度，但不适用于我的高度。无论出于何种原因，我的背景图片不接受百分比高度，只接受实际尺寸。还是谢谢！
您也需要添加position（绝对或固定都可以）

【解决方案2】：

我不确定我是否理解了这个问题，但如果我理解了，我想我确切地知道你在寻找什么。

而不是使用：

    height: 100%;

试试：

    height: 100vh;

'vh' 代表'视口高度'。它应该即时将图像的高度设置为浏览器窗口的全高。

希望对您有所帮助。

【讨论】：

谢谢，这对我很有用。正在研究浏览器支持。
有些单位，比如 vmax 在 Iphone safari 中存在重大问题，我不确定 vh