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

最新推荐文章于 2023-04-19 10:00:00 发布

weixin_30677617

最新推荐文章于 2023-04-19 10:00:00 发布

阅读量348

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/zhaofl/p/4292956.html

版权

能满足不同尺寸的移动设备（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

转载于:https://www.cnblogs.com/zhaofl/p/4292956.html

weixin_30677617

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据浏览器窗口(或不同设备）宽度缩放图片

能满足不同尺寸的移动设备（iphone/ipad/安卓手机)下，同一张图片自适应显示：当图片宽度大于设备宽度时，图片的宽为设备宽度，按比例缩放显示；当图片宽度小于设备宽度时，显示图片实际尺寸。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/...
复制链接

扫一扫