经常会遇到这样一个问题:
远程加载图片的时候,如果图片本身比较大。加载时间比较长,而图片下面有div内容的时候。会出现图片未加载之前,文本挪上去了。而图片加载完成以后。文本被挤下去。这个体验很不好。
有没有办法实现,当图片未加载之前就让图片所在的空间占位不变,加载完成以后文本依然固定在该位置,同时保持图片宽高比不变呢?
通过css来实现:
<style>
.wrap{
width: 1200px;
margin: 20px auto;
display: flex;
}
.pic-wrap{
width: 600px;
height: 0;
overflow: hidden;
padding-bottom: 128%;
}
.pic-wrap img{
width: 100%;
}
.form{
width: 600px;
height: 600px;
box-shadow: 0 0 3px #ccc;
}
</style>
<div class="wrap">
<div class="left">
<div class="pic-wrap">
<img src="https://baj-dabanjiz-conf.oss-accelerate.aliyuncs.com/promotion/login/bim-login1.png" alt="" />
</div>
<div>213123</div>
</div>
<div class="form"></div>
</div>
基本实现就是通过给img的父元素设置如下样式:
.pic-wrap{
width: 600px;
height: 0;
overflow: hidden;
padding-bottom: 128%;
}
.pic-wrap img{
width: 100%;
}
关键是这个padding-bottom: 128%哪里来的?
padding-bottom=图片原始的宽高比*100;
比如本例中img的原始大小1240*960.
宽高比:1240/960.=1.28099173553719
所以这里的padding-bottom=128%;;
这样就能实现图片原本高宽比不变的情况下不挤压下层元素的位置