问题描述

求助webapp响应式布局 背景图片和普通图片如何自适应？

求助webapp响应式布局 背景图片和普通图片如何自适应？
用CSS 如何自适应？因为图片高度和宽度有固定比例 如果就设置width和height为100%
即使图片高清 但碰到不同尺寸设备 图片自动占据全屏 会改变图片比例尺 会影响吧？请问这个问题CSS 怎么解决？谢谢

解决方案

IMG加载的图片width设置为100%，高度会按照width的值自动等比率缩放

背景图片用background-size 属性来控制缩放

 div{
   background:#00ff00 url(img.jpg) no-repeat;
   background-size:60% 80%;
   -moz-background-size:60% 80%;
   -webkit-background-size:60% 80%;
   -o-background-size:60% 80%;
}

http://blog.sina.com.cn/s/blog_475e4b9b0100vpeb.html