Question

这不是一个能够得到一个正确答案的答案，但无论如何我都会问：

是否可以对图像进行放大或放大以使其不模糊？

例如this不应该发生，像素不应该相互模糊，而应该放大块像素。是否有类似maginification: block;或类似CSS或HTML或JS填充的东西？

Answer 1

image-rendering: pixelated;

但它还没有得到支持：

https://developer.mozilla.org/en-US/docs/CSS/image-rendering#Browser_compatibility

这些目前有效，但仅适用于降尺度：

    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */

Answer 2

这取决于图像的分辨率。如果放大图像的分辨率超过分辨率，则会模糊。一种解决方法是使用非常大的图像，但将其显示为较小的图像。所以当你放大时，它会保持它的质量（达到一定程度）。这个jQuery演示展示了我正在尝试解释的内容：

http://webdesignfan.com/demos/imagezoom.html - 图片显示尺寸：640x511

http://webdesignfan.com/demos/image.jpg - 实际图片尺寸：1712x1368

此示例允许您缩放2.5倍以上而不会模糊。

希望这会有所帮助。谢谢。

放大时不要模糊图像

2 个答案: