前端在显示图片缩略图时,如果不清楚图片的尺寸,然后使用固定宽高比的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以下系统),不需兼容低版本手机时,可以考虑用该属性。