css 移动端图片等比显示处理

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

第一次写博文，心情有点小小的激动~~~~~

刚开始做移动端项目的时候遇到了一些优化的问题，比如，打开网页在2g或者3g的情况下加载网页，刚开始渲染的时候，遇到图片文件未请求，图片的高度会为0，当然，如果你给定图片的高度的时候就不会有这样的情况，这样会出现渲染过程不平缓的情况。

类似这样。

之后查询了网上的一些相关资料，发现用rem可以实现宽度等比，但是项目已经基本完成，所以这个办法也是走不通了。。。@@

最后用乐另外一种

<div class="headimg">
<div class="headimgKs">
</div>
</div>
<style>
.headimg {
width: 100%;
height: 0;
position: relative;
padding-bottom: 40%;
}
.headimgKs {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(1.jpg) no-repeat;
background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
}
</style>

试过之后发现效果极佳，原理是利用背景图和绝对定位和padding-bottom属性的百分比值是根据容器宽度进行计算，也就是说容器宽度为320px，padding-bottom：40%就是128px，这样就实现了等比显示图片。

后期又在此基础上实现了一些优化，比如没有图片时的提醒

<div class="guanggaoBanner">
<i>暂无图片</i>
<div class="right-img">
</div>
</div>
<style>
.guanggaoBanner {
position: relative;
width: 94%;
height: 0;
padding-bottom: 50%;
background-color: #ddd;
}
.guanggaoBanner i {
position: absolute;
top: 45%;
left:0;
text-align: center;
width: 100%;
color: #000;
}
.right-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(1.jpg);
background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
</style>