分三层,第一层relative,第二层absolute,第三层fixed
扩充父元素的宽高
- html
<div class="page-container">
<div class="front-container">
<div class="front-bg">
<img src="img/01_02.jpg" class="bg">
</div>
</div>
</div>
- css
.page-container{
position: relative;
}
.front-container{
min-height: 690px;
max-height: 750px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
}
.front-bg {
position: fixed;
width: 200%;
height: 200%;
left: -50%;
background: #fff;
}
.front-bg img {
display: block;
margin: auto;
min-width: 50%;
min-height: 50%;
top: 0;
left: 0;
right: 0;
bottom: 0;
}