【发布时间】：2013-07-21 20:37:23
【问题描述】：
我正在开发一个网站，其中必须至少有五个<section>s，每个都是视口大小。
这是Fiddle。
但我处理的不是纯色，而是大（至少 1000 像素）图像，所有图像都根据background-size: cover 调整大小。这在 WebKit 浏览器中运行良好，但 Firefox 是另一回事。图像越大，Firefox 就越不稳定。这一切都与background-size: cover 有关。没有它，一切都很顺利。事实上，我发现它适用于 Firefox 中的所有图像缩放。
一位同事建议我使用<canvas> 将屏幕外的图像绘制到适当的大小，将画布转换为base 64，并将其作为background-image 应用于每个<section>，但这仅适用于小图像。就像我说的那样，这些图像可能非常大，因此该选项似乎不可行。
所以我的问题是：如何使用这些大背景图片，正确调整它们的大小，并在 Firefox 中保持良好的性能？
旁注：我运行的是配备 Retina 显示屏的 MacBook Pro，所以我认为我的系统规格不是这里的问题。它还在其他非 Retina MacBook Pro 上进行了测试，问题仍然存在。
【问题讨论】：
-
您是否有机会提供一张图片供其他 Firefox 用户测试？
标签： css html image firefox canvas