大图片无法在Chrome中呈现？

Question

非常大的图片无法在Google Chrome中呈现（尽管滚动条的行为仍然会像图像一样）。相同的图像通常在其他浏览器中呈现得很好。

这是两个示例图像。 如果您使用的是谷歌浏览器，则不会看到长红色条：

短蓝
http://i.stack.imgur.com/ApGfg.png

长红
http://i.stack.imgur.com/J2eRf.png

正如您所看到的，浏览器认为图像较长，但它不会呈现。图像格式似乎也不重要：我尝试了PNG和JPEG。我还在运行不同操作系统（Windows和OSX）的两台不同机器上对此进行了测试。这显然是一个错误，但任何人都可以想到一个会迫使Chrome渲染大图像的解决方法吗？

Answer 1

并非有人关心或甚至看过这篇文章，但我确实找到了一个奇怪的解决方法。问题似乎与Chrome处理缩放的方式有关。如果将zoom属性设置为98.6％及更低或102.6％及更高，则图像将呈现（将zoom属性设置为 98.6％和102.6％之间的任何值会导致渲染失败）。请注意，zoom属性未在CSS中正式定义，因此某些浏览器可能会忽略它（在这种情况下这是一件好事，因为这是特定于浏览器的黑客攻击）。只要您不介意稍微调整图像大小，我想这可能是最好的解决方法。

简而言之，以下代码会生成所需的结果，如here所示：

<img style="zoom:98.6%" src="http://i.stack.imgur.com/J2eRf.png">

<小时/> 的更新

实际上，这是一举两得的好机会。随着屏幕移动到更高的分辨率（例如Apple Retina显示屏），Web开发人员将希望开始提供两倍大的图像，然后按照建议here将其缩小50％。因此，您可以简单地将图像的大小加倍并将其渲染为一半大小，而不是使用上面建议的zoom属性：

<img style="width:50%;height:50%;" src="http://i.stack.imgur.com/J2eRf.png">

这不仅可以解决Chrome中的渲染问题，而且可以使下一代高分辨率显示器上的图像看起来更加美观。