Css 在Chrome中缩小图像时图像模糊

Chrome版本55.0.2883.87（64位）

我有一张225px宽的图片。如果我把它缩小1倍，图像就会变得非常模糊。FF不会发生这种情况

下面是一个例子：

li{
列表样式类型：无；
宽度：224px；
}
img{
最大宽度：100%；
}

---

图像是225px，我把最大宽度设为224px。单个像素在图像质量上有很大差异（仅在Chrome中）。我尝试过使用图像渲染，但没有取得多大成功。

在Chrome中与224-225没有任何不同。值得一提的是，我完全可以看到这两个值之间的差异。所以我想象它很可能是半像素或者其他什么东西，因为它无法计算出与完整像素的比率。我想解决的问题是，当我的图像开始适应不同的屏幕时，图像的质量就会下降：/我以前从未遇到过这个问题……看，我遇到了类似的问题。。。尝试使用以下方法：

图像渲染：-webkit优化对比度除了它让我的图像看起来像垃圾。。。说到这里，视网膜机器（macos）上的chrome可以很好地显示图像。但在我的电影屏幕上，我看到了模糊的图哈：（真烦人，如果你发现了什么，请让我知道！在Chrome中与224-225没有任何不同。值得一提的是，我可以肯定地看到这两个值之间的差异。所以我想它可能是半像素或其他东西，因为它无法计算出与完整像素的比率。我要解决的问题是当我的图像开始适应不同的屏幕时，图像的质量就会下降：/我以前从未遇到过这个问题…看，我也遇到过类似的问题…尝试过使用这个：
图像渲染：-webkit优化对比度；
除了它使我的图像看起来像垃圾…说到这里，视网膜机器上的chrome（macos）显示图像很好。但在我的影院显示屏上，我感觉模糊透了：（真烦人，如果你发现了什么，请告诉我！
li {
  list-style-type: none;
  width: 224px;
}

img {
  max-width: 100%;
}

<ul>
    <li><img src="http://i.imgur.com/Ks3QUUr.png"></li>
</ul>