8

当我使用 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 是否可以使用其中之一解决我的渲染问题？

谢谢。

4

2 回答 2

2

删除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+           */
于 2017-09-28T04:23:46.397 回答
-1

我不确定您是否尝试过对图像使用 image srcset 或 image-set。有一篇很好的文章让我重新思考了我的图像，它可以让我保持清晰。我也开始为我的图标、徽标和其他图像使用 svg。我希望它可以帮助你。

于 2015-02-03T20:14:45.213 回答