缩小时的 CSS 和模糊图片

Question

当我使用 HTML 和 CSS 将图片显示为原始大小时，图片非常完美(当然)。

如果我尝试以比原始尺寸大的尺寸显示它，我预计它会变得模糊，但如果最终尺寸较小则不会。这就是正在发生的事情:我的照片在任何情况下都是模糊的。

问题是网站和图片是响应式的，我无法为所有可能的尺寸创建缩略图，但我仍然需要结果是清晰的。至少没那么模糊。

我在网上搜索并找到了这个 CSS:

image-rendering:-moz-crisp-edges;          /* Firefox        */
image-rendering:-o-crisp-edges;            /* Opera          */
image-rendering:-webkit-optimize-contrast; /* Safari         */
image-rendering:optimize-contrast;         /* CSS3 Proposed  */
image-rendering:crisp-edges;               /* CSS4 Proposed  */
image-rendering:pixelated;                 /* CSS4 Proposed  */
-ms-interpolation-mode:nearest-neighbor;   /* IE8+           */

它有效，但它给了我完全相反的结果:它太脆了，图片上出现了伪影(点)。我把它们一起试过，也分别试过，但没有成功。全有或全无。

这就像您在 Photoshop 中拍了一张不错的照片，然后将锐度 slider 推到最大。无论哪种方式，它都太极端而无法使用。

我使用 php、jquery、html 和 css是否可以使用其中之一解决我的渲染问题？

谢谢。

Answer 1

移除 crisp-edges 和 pixelated 线，我们就可以开始了。

在 Chrome 61 上测试

最终代码:

image-rendering:-moz-crisp-edges;          /* Firefox        */
image-rendering:-o-crisp-edges;            /* Opera          */
image-rendering:-webkit-optimize-contrast; /* Safari         */
image-rendering:optimize-contrast;         /* CSS3 Proposed  */
-ms-interpolation-mode:nearest-neighbor;   /* IE8+           */