网上尝试方案:
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;