Question

我想加载一个巨大的jpg，48000x990px作为背景图像。

HTML：

<div id="car-canvas-wrapper">
  <div id="car-canvas" style="background-image: url('http://via.placeholder.com/48000x320');"></div>
</div>

CSS

html,
body {
  padding: 0;
  margin: 0;
}

#car-canvas-wrapper {
  width:100%;
  position: relative;
}

#car-canvas {
  background-size: cover;
  width: 100%;
  padding-top: 51.5625%;
}

您可以在CodePen中找到一个示例：https://codepen.io/anon/pen/ypyMpZ

在Chrome，Edge，Internet Explorer和Safari中，一切都很棒。但在Firefox中存在一些严重的问题。有时清理缓存时会加载图像。如果它的负载和我调整窗口大小，图像消失。在检查器中，我看到，在调整大小后，背景图像得到了0x0px。

显然图片太大了。问题：为什么除Firefox之外的所有浏览器都能显示图像？

编辑：我从网络服务器中删除了巨大的图片并插入占位符图片（48000x320px）。如果您遇到类似的问题，请记住这一点并阅读此主题。

Answer 1

Firefox修复图片可能不仅仅是这个简单的解决方案，但我发现这是以前项目的工作解决方案。

只需添加以下css：

#car-canvas-wrapper { display: block;}

应该做的伎俩。

在调整大小

1 个答案: