首页 > 移动平台 > 详细

关于在移动网页中图片自适应大小的写法

时间:2015-10-28 18:46:01      阅读:282      评论:0      收藏:0      [点我收藏+]

一般在移动网页时,图片属性写成如下就可以达到自适应大小

<style type="text/css">
.nameg{background: rgba(000,000,000,0.6);}    
.nameg div{float: left;}
.nameg .a1{width: 10%;background:#000000;}
.nameg .a1 img{width: 100%;height: 100%;display: block;}
.nameg .a2{width: 90%}
</style>
<div class="nameg clearfix">
    <div class="a1">
        <img src="iconfont-close..png">
    </div>
    <div class="a2"></div>
</div>

若在某些特殊时候图片会出现宽度自动高度却拉伸的情况下,可以用以下写法(max-width: 100%; height:auto;display: block;

注:做用户图像图片时最好使用1比1标准尺寸图片,且要有默认图片,否则在占位符时或找不到图片时依然会出现拉伸现象

<style type="text/css">
.nameg{background: rgba(000,000,000,0.6);}    
.nameg div{float: left;}
.nameg .a1{width: 10%;background:#000000;}
.nameg .a1 img{max-width: 100%; height:auto;display: block;}
.nameg .a2{width: 90%}
</style>
<div class="nameg clearfix">
    <div class="a1">
        <img src="iconfont-close..png">
    </div>
    <div class="a2"></div>
</div>

 

关于在移动网页中图片自适应大小的写法

原文:http://www.cnblogs.com/zhixi/p/4917961.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!