Javascript jQuery背景图像在缩放或窗口大小调整时重新缩放

我有个问题。 我想要一个

div

容器中的背景图像，宽度为窗口的100%。 我希望它在缩放时改变，在调整窗口大小时应该调整大小

以下是我的尝试：

var imageWidth=1024；
var imageHeight=600；
$（文档）.ready（函数（）{
jQuery（窗口）.resize（函数（）{
调整图像大小（）；
api.reinitialise（）；
}   
}
$（窗口）.resize（函数（）{resizeImage（）}）；
函数resizeImage（）{
var navWidth=jQuery（window）.width（）；
var navHeight=jQuery（window）.height（）；
var navRatio=导航宽度/导航高度；
var imageRatio=图像宽度/图像高度；
如果（导航比率>图像比率）{
var newHeight=（导航宽度/图像宽度）*图像高度；
var newWidth=导航宽度；
}否则{
var newHeight=导航高度；
var newWidth=（导航高度/图像高度）*图像宽度；
}
var newTop=0-（（新高度-导航高度）/2）；
var newLeft=0-（（newWidth-navWidth）/2）；
$（'#image'）.css（{height:navHeight，width:navWidth}）；
$（'#image img'）.css（{height:newHeight，width:newWidth，top:newTop，left:newLeft}）；
$（'#image'）.css（{可见性：“可见”，显示：“块”}）；
}

img{border:0px；}
html{高度：100%；}
正文{宽度：100%；高度：100%；文本对齐：左侧；字体：普通12px Arial}
div#image{位置：固定；z索引：98；显示：块；}
div#image img{溢出：隐藏；位置：绝对；z索引：99；}

---

您知道使用css（3）可以通过多种方式实现这一点吗？

---

问题是什么？唯一的问题是，对于那些不支持css3yes的用户来说，要想获得最大的兼容性，您需要使用提供的jQuery方法

    html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    }

$(window.innerWidth).on('change', function(){

});