Javascript 背景图像缩放

我正在建设一个网站，我希望背景图像与页面的比例，始终是正确的高宽比。

background size:cover

或

contain

的问题在于，虽然它可以正确调整宽度尺寸，但如果浏览器的纵横比高于背景图像，它会开始垂直平铺

所以我想我应该编写一个jQuery函数来解决这个问题，它对我来说非常有用：

$(window).resize(resizeBg);

function resizeBg(){
    var winWidth = window.innerWidth;
    var winHeight = window.innerHeight;
    var aspectRatio = winWidth/winHeight;
    var imageRatio = 1920/1200;
    if(aspectRatio < imageRatio)
        $("body").css("background-size", "auto " + winHeight + "px");
    else
        $("body").css("background-size", winWidth + "px auto");
}
resizeBg();

$（窗口）。调整大小（调整大小）；
函数resizeBg（）{
var winWidth=window.innerWidth；
var winHeight=window.innerHeight；
var aspectRatio=winWidth/winHeight；
var成像比=1920/1200；
if（aspectRatio

但在我开始之前，我只是想问一下，是否有人知道更好的方法，或者我可以用什么方法来清理这个函数

---

谢谢。

背景尺寸：自动在这里应该可以正常工作，您只需要指定

后台重复：无重复和背景位置：中间位置。希望这有帮助。
背景尺寸：自动

在这里应该可以正常工作，您只需要指定

后台重复：无重复和背景位置：中间位置。希望这能有所帮助。
有几种不同的方法可以实现这一点。我通常会尝试并坚持使用css。这里只有一个css方法

html

在cstricks.com的一篇帖子中，它探讨了所有的方法，并包括了优缺点和演示。我在探索这件事时发现它很有用

有几种不同的方法可以实现这一点。我通常会尝试并坚持使用css。这里只有一个css方法

html

在cstricks.com的一篇帖子中，它探讨了所有的方法，并包括了优缺点和演示。我在探索这件事时发现它很有用

答案中应包含相关代码示例，因为不能保证链接始终有效。谢谢，我没有使用上面的代码，但CSS3方式非常有效。这个网站是为一个特定的人口统计，我可以推测将不会使用少于IE9。所以这是完美的。谢谢相关的代码示例应该包含在你的答案中，因为不能保证链接总是有效的。谢谢你，我没有使用上面的代码，但是CSS3的方式很有效。这个网站是为一个特定的人口统计，我可以推测将不会使用少于IE9。所以这是完美的。谢谢
<div id="bg">
  <img src="images/bg.jpg" alt="">
</div>

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}

#bg img {
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}