放大时不要模糊图像答案

【问题标题】：Don't blur images when magnified放大时不要模糊图像
【发布时间】：2013-03-25 13:33:28
【问题描述】：

这不是一个能得到一个正确答案的答案，但我还是会问：

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

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

【问题讨论】：

您要查找的术语是 anti-alias。
这是一个类似的问题。 stackoverflow.com/questions/8597081/…
如何计算基于像素的放大取决于所选的算法。如果将像素值作为原始像素之间的平均颜色进行插值，则会出现模糊。如果将其设置为最接近的原始像素，则会得到大的颜色方块。

【解决方案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) */

【讨论】：

哇，反应快。谢谢！

【解决方案2】：

这取决于图像的分辨率。如果您将图像放大到超过分辨率，它将变得模糊。一种解决方法是使用非常大的图像，但将其显示为较小的图像。因此，当您放大时，它会保持其质量（在一定程度上）。这个 jQuery 演示节目就是我要解释的内容：

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

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

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

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

【讨论】：