大图片无法在Chrome中呈现？ [英] Large images don't render in Chrome?

问题描述

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

Very large images will not render in Google Chrome (although the scrollbars will still behave as if the image is present). The same images will often render just fine in other browsers.

这是两个示例图像。 如果您使用的是Google Chrome，则不会看到长红色条：

Here are two sample images. If you're using Google Chrome, you won't see the long red bar:

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

长红

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

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

As you can see, the browser thinks the longer image is there, but it simply doesn't render. The image format doesn't seem to matter either: I've tried both PNGs and JPEGs. I've also tested this on two different machines running different operating systems (Windows and OSX). This is obviously a bug, but can anyone think of a workaround that would force Chrome to render large images?

推荐答案

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

Not that anyone cares or is even looking at this post, but I did find an odd workaround. The problem seems to be with the way Chrome handles zooming. If you set the zoom property to 98.6% and lower or 102.6% and higher, the image will render (setting the zoom property to any value between 98.6% and 102.6% will cause the rendering to fail). Note that the zoom property is not officially defined in CSS, so some browsers may ignore it (which is a good thing in this case since this is a browser-specific hack). As long as you don't mind the image being resized slightly, I suppose this may be the best fix.

简而言之，下面的代码会产生所需的结果，如显示此处：

In short, the following code produces the desired result, as shown here:

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

---

更新：

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

Actually, this is a good opportunity to kill two birds with one stone. As screens move to higher resolutions (e.g. the Apple Retina display), web developers will want to start serving up images that are twice as large and then scaling them down by 50%, as suggested here. So, instead of using the zoom property as suggested above, you could simply double the size of the image and render it at half the size:

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

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

Not only will this solve your rendering problem in Chrome, but it will make the image look nice and crisp on the next generation of high-resolution displays.

这篇关于大图片无法在Chrome中呈现？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！