web展示图片出现锯齿

现象

在页面中使用<img>标签展示图片时，发现图片会出现锯齿，严重影响观感。一开始怀疑会不会是<img>标签的问题，在改用<div>标签并设置background-image后发现仍然存在这个问题。

在对css的各个属性进行测试的时候发现，当去除object-fit:cover属性（同理background-size:cover属性）时，图片就不会有锯齿，但是这样图片的大小尺寸就不对，无法显示成预期的大小。

成因

在后续的尝试中发现，因为展示的图像分辨率，所以在大幅度缩放和变形（cover的作用）的过程中导致了下采样，从而产生了锯齿

解决方案

既然知道了是因为图片的分辨率太高而导致的问题那么就好解决，将图片的分辨率降低即可，在测试后大约图片的尺寸为容器大小的两倍最佳（宽*2，高*2），对比图如下，锯齿在线条处的表现更加明显。（上面的是高分辨率图，下面的是适合分辨率图）