当我使用HTML和CSS将图片显示为其原始大小时,图片效果非常完美(当然)。
如果我试图将其显示为比原始大小更大的尺寸,则我希望它变得模糊,但如果最终尺寸较小,则不应该模糊。但问题是:在所有情况下,我的图片都很模糊。
问题在于网站和图片是响应式的,而我无法为每种可能的尺寸创建缩略图,但仍需要结果清晰,至少不要太模糊。
我搜寻了网络并找到了这个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,是否有一种解决方案可以解决我的渲染问题呢?
谢谢。