首页 > 代码库 > css 移动端图片等比处理
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>
或者是没有图片的时候给定一张默认图，在第一个例子的基础上把背景图改为 background: url(1.jpg),url(‘默认图‘) ;
写得不好的地方还请大家不吝赐教哈，3Q
css 移动端图片等比处理
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。