在HTML5中放大图像而不模糊

Question

有没有办法让HTML5中的图像更大而不会变得模糊。

例如，此图片为24x24：

如果你用宽度150加载它，它会变得模糊。 我想要像素化 ！

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

相反，我想改变渲染引擎，以便像在photoshop中看到的那样显示。像这样：

我只关心现代浏览器。

Answer 1

如果你把它留给浏览器，他们会尽量使它尽可能顺利（旧的IE版本没有）。因此，最好的办法是将其加载到画布中并自己进行（最近邻居）升级。我不是说这是一个理智的想法，只是把它放在那里。 ：）

那个，或者有多个版本的图像并以某种方式切换它们。您可以尝试一些技术，如css推拉门。

Answer 2

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

不幸的是，目前没有其他支持的方式。我的建议是，您可以像我在原始帖子的编辑中那样简单地缩放图像。

像这样：

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