jquery - 带有FF / IE的jquery backstretch背景图像

Question

我有一个简单的页面结构，其中一个大图像作为“正在进行的工作”页面的背景。

问题是在 Firefox 的 1152x864 分辨率下，背景图像被“截断”，而在 Internet Explorer（和相同的分辨率）下，一切似乎都正常。

“截断”的意思是徽标，特别是“创意摄影师”一词，似乎非常靠近显示器的左侧。

对于其他屏幕分辨率（1200x800、800x600），图像对我来说也很好！

该网站是公开的，网址为http://www.antoniafiore.com

我有什么不对吗？你能建议我哪里错了吗？

感谢您的回复！

这里有一些截图

• 带有命令栏的 Firefox（好）：http ://bit.ly/SKser1
• 没有命令栏的 Firefox（坏）：http ://bit.ly/QFPCIk
• 带有命令栏的 IE（好）：http ://bit.ly/Q2m8Ub
• 没有命令栏的 IE（坏）：http ://bit.ly/VxGgD4

Answer 1

如果您可以使用 CSS 3，我建议您将这样的样式应用于您的背景：

div#bg
{
    background-image: url('bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
}

这将确保无论当前屏幕分辨率如何，您的图像都能正确缩放。我用它来在我的网站上显示我不想被错误地缩放或切碎的高分辨率图像。

background-size 属性是特定于 CSS 3 的，但其余属性与 CSS 2 兼容。此外，您不需要为此使用 jQuery。它可以用直接的 CSS 3 来完成。