[英]Vertically responsive background image
我有一个带有薄边距(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;
}
如果您想要与宽度具有相同的1%边距,则只需将高度更改为98%(宽度为)。
如果要精确地有10px的边距,请指定边距,使用calc()
设置宽度和高度:
margin: 10px;
height: calc(100% - 20px);
width: calc(100% - 20px);
看到它在这里工作: http : //jsfiddle.net/snvhbee7/
我不确定我是否理解这个问题,但如果我这样做,我想我确切地知道你在寻找什么。
而不是使用:
height: 100%;
尝试:
height: 100vh;
'vh'代表'viewport height'。 它应该动态地将图像的高度设置为浏览器窗口的整个高度。
希望有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.