大图像在Chrome中不显示？

非常大的图像不会在Google Chrome中呈现（尽管滚动条仍然会像图像存在一样）。在其他浏览器中，相同的图像通常会显示得很好。大图像在Chrome中不显示？

这是两个示例图像。 如果您使用谷歌浏览器，你将看不到长红棒：

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

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

来源

2012-09-21 David Jones

并不是说任何人都在关心或甚至在看这篇文章，但我找到了一个奇怪的解决方法。这个问题似乎与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显示屏），网络开发人员将希望开始提供两倍大的图像，然后按照建议here将其缩小50％。因此，而不是使用上述建议的zoom属性，你可以简单地加倍图像的大小和一半大小使它：

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

这不仅会解决您的渲染问题在Chrome中，但它会使图像在下一代高分辨率显示器上看起来很好看。

来源

2012-09-21 07:21:14

...以'@ 2x'图像带宽的4倍，'@ 3x'图像的9倍为代价。 –

@MikeCauser这个问题和答案是5岁。此错误已得到修复，Chrome现在可以正确渲染这些长图像，当然'srcset'得到了很好的支持，因此您可以为不同的像素密度提供多个版本的图像。我相信5年前我有这个问题的原因是因为我正在创建一个一维图标精灵。由于精灵的高度非常小，因此在文件大小方面，将宽度加倍并不是什么大事。 –

对不起，我不是故意挖个5yo的答案。昨天，我在旧版Android 4.1.2手机上遇到了最新Chrome 57中的一个bug，其中'background-image'中5000px宽的精灵不会显示。尝试几乎所有的东西，让它工作，然后我偶然发现你的答案。然后设法通过添加一个'zoom：99.9997％'来解决它。 –

大图像在Chrome中不显示？

回答

相关问题