关于img标签缩小后模糊的解决方案

网上尝试方案：

1.image-rendering: pixelated; // 像素化，出现锯齿状，pass
2.image-rendering: crisp-edges; // 无效
3.只设置width // 无效，还是会模糊

最终解决方案：
width: 100px;
height: 200px;
object-fit: cover;

---

关于很多人分不清object-fit各个参数的效果，其实根据单词含义能推测出来：
原图：

1.fill：充满
拉伸图片达到设置的宽高（在contain的基础下，哪边留边了拉哪边，contain见下）

width: 150px;
height: 70px;
object-fit: fill;

2.contain：包含
在能够全部显示的基础下，尽可能大的展示（可能适应高，也可能适应宽，会全部显示图片，不剪裁，所以会留白）

width: 150px;
height: 70px;
object-fit: contain;

3.cover：覆盖
在适应高或者宽的前提下，尽可能展示更多（可能适应高，也可能适应宽，会剪裁，不会留白）

width: 150px;
height: 70px;
object-fit: cover;

4.none：图片不作处理
不压缩，显示原始大小，会取中间部分展示

 width: 150px;
height: 70px;
object-fit: none;

5.scale-down：缩放，向下兼容
如果图片大于设置的宽高，则为contain效果（会压缩，不剪裁，留边）
如果图片小于设置的宽高，则为none效果（不放大，展示原始大小）

width: 150px;
height: 70px;
object-fit: scale-down;