css 移动端图片等比显示处理
2016-09-20 22:30
375 查看
第一次写博文,心情有点小小的激动~~~~~
刚开始做移动端项目的时候遇到了一些优化的问题,比如,打开网页在2g或者3g的情况下加载网页,刚开始渲染的时候,遇到图片文件未请求,图片的高度会为0,当然,如果你给定图片的高度的时候就不会有这样的情况,这样会出现渲染过程不平缓的情况。
类似这样。
![](https://images2015.cnblogs.com/blog/1029816/201609/1029816-20160920220716918-642629991.png)
之后查询了网上的一些相关资料,发现用rem可以实现宽度等比,但是项目已经基本完成,所以这个办法也是走不通了。。。@@
最后用乐另外一种
![](https://images2015.cnblogs.com/blog/1029816/201609/1029816-20160920221637121-286178801.png)
试过之后发现效果极佳,原理是利用背景图和绝对定位和padding-bottom属性的百分比值是根据容器宽度进行计算,也就是说容器宽度为320px,padding-bottom:40%就是128px,这样就实现了等比显示图片。
后期又在此基础上实现了一些优化,比如没有图片时的提醒
![](https://images2015.cnblogs.com/blog/1029816/201609/1029816-20160920222332590-2038424556.png)
或者是没有图片的时候给定一张默认图,在第一个例子的基础上把背景图改为 background: url(1.jpg),url('默认图') ;
写得不好的地方还请大家不吝赐教哈,3Q
刚开始做移动端项目的时候遇到了一些优化的问题,比如,打开网页在2g或者3g的情况下加载网页,刚开始渲染的时候,遇到图片文件未请求,图片的高度会为0,当然,如果你给定图片的高度的时候就不会有这样的情况,这样会出现渲染过程不平缓的情况。
类似这样。
![](https://images2015.cnblogs.com/blog/1029816/201609/1029816-20160920220716918-642629991.png)
之后查询了网上的一些相关资料,发现用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>
![](https://images2015.cnblogs.com/blog/1029816/201609/1029816-20160920221637121-286178801.png)
试过之后发现效果极佳,原理是利用背景图和绝对定位和padding-bottom属性的百分比值是根据容器宽度进行计算,也就是说容器宽度为320px,padding-bottom:40%就是128px,这样就实现了等比显示图片。
后期又在此基础上实现了一些优化,比如没有图片时的提醒
![](https://images2015.cnblogs.com/blog/1029816/201609/1029816-20160920222332590-2038424556.png)
<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
相关文章推荐
- Android6.0权限申请解决方案
- Android压缩Bitmap
- 看,这个工具栏能伸缩折叠——Android CollapsingToolbarLayout使用介绍
- Android编译Release版本
- 自定义dialog
- 黑马Android76期从入门到就业班视频教程下载
- Material Design学习:CoordinatorLayout+AppBarLayout+CollapsingToolbarLayout
- Android开发:最详细的 Toolbar 开发实践总结
- Android开发:Translucent System Bar 的最佳实践
- iOS自动释放池
- Android导航书签
- 自制微信公众号一键排版工具
- iOS - MFi 认证
- Struts2 的一些基本配置 <constant name="struts.objectFactory" value="spring" />
- android 二维码扫描框在高分辨率手机屏上显示很小的问题解决
- android实现正方形的ImageView、Layout等(即高度适应宽度或者宽度适应高度)
- swift String
- Leetcode #42 Trapping Rain Water
- Android M 新控件 TabLayout 与 NavigationView 实践
- elasticsearch之mapping配置