如图,页面结构如下:
开始的css如下:
.section-home-carousel {
width: 100%;
height: 100%;
img{
width: 100%;
height: 100%;
}
}
结果页面刷新时,下方白色区域要在图片位置闪现
更改后的css:
将img的父元素高度设为0,使用padding-bottom占据图片的位置,这样,下方的区域就不会在图片未加载完成时出现闪现的情况,padding-bottom取的是图片的高宽比列,可以实现图片大小自适应
.section-home-carousel {
width: 100%;
// height: 100%;
height: 0;
overflow: hidden;
padding-bottom: 36.46%;
img{
width: 100%;
// height: 100%;
}
}