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 中拍摄了一张不错的照片，并将锐度滑块推到了最大值。

无论哪种方式，都过于极端而无法使用。

我使用的是 PHP、jQuery、HTML 和 CSS，是否有一种解决方案可以解决我的渲染问题呢？

谢谢。

- Baylock

---

你知道在显示页面时要缩放到哪些确切的尺寸，还是会动态调整高分辨率图像的大小？ - Derik Nel

它是响应式的，所以不，我不知道。它可能是任何东西。 - Baylock

我也遇到了这个问题，这是一个演示链接 - http://jsfiddle.net/ygutz4wm/1/。非常渴望解决这个问题！ - LiveSource

是的，仍然想知道是否有解决方案。 - Baylock

这个回答解决了你的问题吗？使用CSS进行图像缩小...在多个浏览器中图像模糊 - T J

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+           */

- AlbertSamuel

Answer 2

我不确定你是否尝试过使用图像srcset或image-set来处理你的图片。有一篇好文章让我重新思考了我的图片，并且它对于保持图片清晰度非常有效。我也开始使用SVG来制作我的图标、标志和其他图片。希望这能对你有所帮助。

- dreamweaver