html - 放大时不要模糊图像

Question

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

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

例如this不应该发生，像素不应该相互模糊，但应该用放大的 block 像素放大。是否有类似 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) */