根据浏览器窗口(或不同设备)宽度缩放图片
能满足不同尺寸的移动设备(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