首页 / CSS / css 移动端图片等比处理
css 移动端图片等比处理
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css 移动端图片等比处理，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1504字，纯文字阅读大概需要3分钟。
内容图文
第一次写博文，心情有点小小的激动~~~~~
刚开始做移动端项目的时候遇到了一些优化的问题，比如，打开网页在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
原文：http://www.cnblogs.com/lmyt/p/5890739.html
内容总结
以上是互联网集市为您收集整理的css 移动端图片等比处理全部内容，希望文章能够帮你解决css 移动端图片等比处理所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。