admin 管理员组

文章数量: 887007

缩略图如何不挤压拉伸图片

　　前端在显示图片缩略图时，如果不清楚图片的尺寸，然后使用固定宽高比的img来显示图片，这样会导致宽高比不一致的图片会被挤压拉伸。

　　处理方式，话不多说，直接上代码(图片请自找)：

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,viewport-fit=cover" /><title>图片缩略图</title><style>*{margin: 0; padding: 0;}p{font-size: 24px;}.way_max,.way_contain{display: inline-block; margin-right: 20px;border: 1px solid red;overflow: hidden;font-size: 0;width: 200px;height: 200px;text-align: center;}.img01{max-width: 171px;}.img02{max-width: 100px;}.way_contain{background-image: url("./images/pkq.png");background-repeat: no-repeat;background-size: contain;background-position: 50% 50%;}.way_cover{margin-right: 20px;border: 1px solid red;overflow: hidden;font-size: 0;width: 200px;height: 200px;background-image: url("./images/pkq.png");background-size: cover;}</style>
</head>
<body><p>处理方式：max-width  全图有留白缩略图</p><div class="way_max"><img  class="img01" src="./images/pkq.png" /></div><div class="way_max"> <img  class="img02" src="./images/pkq.png" /></div><p>处理方式： background-size: contain  全图有留白缩略图</p><div class="way_contain"></div><p>处理方式(微信)：way_cover  有裁剪无留白缩略图</p><div class="way_cover"></div>
</body>
</html>

备注：还可以使用 CSS3的object-fit 属性(缺陷：不支持安卓4.4系统 + ios9以下系统)，不需兼容低版本手机时,可以考虑用该属性。

本文标签： 缩略图如何不挤压拉伸图片

版权声明：本文标题：缩略图如何不挤压拉伸图片 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732354671h1534088.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。