在HTML5中放大图像而不模糊

Question

有没有办法在HTML5中使图像更大而不会变得模糊.

例如,此图像为24x24:

如果你用宽度为150加载它,它会变得模糊.我想要像素化!

http://png-1.findicons.com/files/icons/734/phuzion/24/bug.png

相反,我想改变渲染引擎,以显示你在photoshop中看到的内容.像这样的东西:

我只关心现代浏览器.

Answer 1

经过一些研究：不幸的是，您想要做的事情受到浏览器特定限制的限制。Firefox 有一个有限的实验代码(image-rendering)，可以强制浏览器停止插值像素，从而导致模糊。

不幸的是，目前没有其他受支持的方法来执行此操作。我的建议是您只需缩放图像，就像我在编辑原始帖子时所做的那样。

像这样：

Mozilla 的文档页面：https://developer.mozilla.org/en-US/docs/CSS/image-rendering