我从这里拿了代码.代码运行良好但是当我添加一个额外div的包装div类时fullwidth,图像高度不会根据屏幕的高度平均缩放.
这就是它最初的样子:
body,
html {
height: 100%;
}
.fullwidth {
display: flex;
flex-direction: column;
height: 100%;
}
.repeat-x {
flex: 1;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.bg-1 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
.bg-2 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}
.bg-3 {
background-image: url(http://oi65.tinypic.com/28v4p6u.jpg);
}<div class="fullwidth">
<div class="repeat-x bg-1"> </div>
<div class="repeat-x bg-2"> </div>
<div class="repeat-x bg-3"> </div>
</div>fullwidth用另一个包装后div: -
body,
html {
height: 100%;
}
.fullwidth {
display: flex;
flex-direction: …