一般在移动网页时,图片属性写成如下就可以达到自适应大小
<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- 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>