html - 放大时不要模糊图像

Question

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

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

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

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 倍以上而不会模糊。

希望这可以帮助。谢谢。