jquery - 居中全屏响应图像 - Jquery 方法

Question

我正在引用 CSS Trick 的全页背景并使用我在此处完美运行的 Jquery 方法:www.oxbowdesigns.com

但是，当出现溢出时，我无法更新 jquery 以使图像居中而不是固定在左侧。

下面是两张图片，展示了现在发生的事情以及我的目标:

Current

Goal

这是我正在使用的代码:

$(window).load(function() {

  var theWindow = $(window),
    $bg = $("#bg"),
    aspectRatio = $bg.width() / $bg.height();

  function resizeBg() {

    if ((theWindow.width() / theWindow.height()) < aspectRatio) {
      $bg
        .removeClass()
        .addClass('bgheight');
    } else {
      $bg
        .removeClass()
        .addClass('bgwidth');
    }

  }

  theWindow.resize(resizeBg).trigger("resize");

});

#bg {
  position: fixed;
  top: 0;
  left: 0;
}
.bgwidth {
  width: 100%;
}
.bgheight {
  height: 100%;
}

<img src="images/Homepage/HomepageResize2.jpg" id="bg">

我试过使用 CSS margin:50%;和其他没有运气的 CSS 技术。任何指导将不胜感激!

谢谢， 克里斯

Answer 1

下面这段代码满足您的需求:这是不需要使用 js 的 css 方法

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