大图片无法在Chrome中呈现？

Question

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

这是两个示例图像.如果您使用的是谷歌浏览器,则不会看到长红条:

Short Blue
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）。只要您不介意稍微调整图像大小，我想这可能是最好的解决方法。

总之，下面的代码产生所需的结果，如图这里：

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

更新：

其实，这是一石二鸟的好机会。至于屏幕移动到更高的分辨率（如苹果的Retina显示屏），Web开发人员将要开始服务了是两倍的图像，然后范围缩小了50％，如建议在这里。因此，zoom您可以简单地将图像的大小加倍并将其渲染为一半大小，而不是像上面建议的那样使用该属性：

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

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