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-edgespixelated线,我们很高兴。

在 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 回答