根据浏览器窗口(或不同设备)宽度缩放图片

能满足不同尺寸的移动设备(iphone/ipad/安卓手机)下,同一张图片自适应显示:当图片宽度大于设备宽度时,图片的宽为设备宽度,按比例缩放显示;当图片宽度小于设备宽度时,显示图片实际尺寸。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片缩放</title>

<style type="text/css">
/**最重要的部分**/
.content-width {MARGIN: auto;WIDTH: 100%;}
.content-width img{MAX-WIDTH: 100%!important;HEIGHT: auto!important;width:expression(this.width > 320 ? "320px" : this.width)!important;}
/**320有什么影响?暂时不明**/ </style> </head> <body> <div class="content-width"> <p><img src="./images/12567247980.jpg"/></p> <p><img src="./images/12567247981.jpg"/></p> </div> </body> </html>

 

用到的图片

12567247980.jpg

12567247981.jpg

posted @ 2015-02-15 15:09  Angel_Bell  阅读(741)  评论(0编辑  收藏  举报