缩小时缩小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

我不确定您是否尝试过在图像中使用 image srcset 或 image-set 。有一篇好文章让我重新思考我的图像，它有助于保持它们对我来说清晰。我还开始使用 svg 来制作我的图标、徽标和其他图像。我希望它能帮助你。