图片闪动:在移动端设置图片布局时,图片使用自适应的方式,其父元素的高度是被图片高度撑开的。在图片加载前,父元素高度为0;加载后,父元素高度为图片高度。这样的过程会造成视觉上的闪烁,影响用户体验。
因此,在用图片撑开父元素高度之前,就需要给父元素设置一个高度。这个高度不能写成定值,否则无法适配移动端各种尺寸。此时,可以利用padding百分比的方式,来将父元素作为一个占位符,提前撑开高度,以便于图片加载后放入父元素中。这样的思路而言,图片元素必须是绝对定位(绝对定位相对于父元素的边框来定位),而父元素的padding-top或者padding-bottom则为百分比(具体的百分比与图片的宽高比例相关,如100%则是1:1)。
padding百分比是以父元素的宽度做基准的(horizon-flow)或者高度做基准(vertical-flow)
以图片宽高1:1为例,如下:
HTML代码如下:
<div class="content">
<div class="picWrapper">
<img src="url" />
</div>
</div>
CSS代码如下:
.picWrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 100%;
}
.picWrapper img {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}