image - 大图像无法在 Chrome 中呈现？

Question

非常大的图像不会在 Google Chrome 中呈现(尽管滚动条仍会表现得好像图像存在一样)。相同的图像通常会在其他浏览器中呈现得很好。

这是两个示例图像。 如果您使用的是 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 中正式定义，因此某些浏览器可能会忽略它(在这种情况下这是一件好事，因为这是特定于浏览器的 hack)。只要您不介意稍微调整图像大小，我想这可能是最好的解决方法。

总之，下面的代码产生了想要的结果，如图here :

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

更新:

其实，这是一石二鸟的好机会。随着屏幕转向更高分辨率(例如 Apple Retina 显示屏)，Web 开发人员将希望开始提供两倍大的图像，然后将其缩小 50%，如建议的 here .所以，不要使用 zoom如上所述，您可以简单地将图像的大小加倍并将其渲染为一半大小:

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

这不仅可以解决您在 Chrome 中的渲染问题，而且可以使图像在下一代高分辨率显示器上看起来既漂亮又清晰。