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，有没有办法解决我的渲染问题？

谢谢。

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

Answer 2

我不确定您是否尝试过对您的图像使用image srcset或image-set。有一个good article让我重新思考我的图像，它能让我的图像保持锐利。我还开始对我的图标、徽标和其他图像使用svg。我希望它能帮到你。