手机浏览器用css设置图片自适应大小

2014年05月13日 03:54 by:老修

导读: 手机浏览器(移动站点)图片自适应的css代码:手机页面不像pc网站, 尽可能避免使用js脚本, 以避免不同的手机浏览器出现"水土不服".你可以用手机浏览器访问老吧的一个页面测试一下这个手机网页的图片自适应大小: http://m.lao8.org/a50

手机页面不像pc网站, 尽可能避免使用js脚本, 以避免不同的手机浏览器出现"水土不服".

手机浏览器(移动站点)图片自适应的css代码:

  1. img{max-width: 100%;height: auto;width: auto\9;}

用max-width设置如果图片尺寸大于当前浏览器尺寸就自动缩放, 图片的高度设置正比缩放, 但是ie8有个比较二的bug就是不支持max-width属性, 而ie7和ie9都支持.

测试页面, 你可以用手机浏览器访问老吧的一个页面测试一下: http://m.lao8.org/a50