居中全屏响应图像 - 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;
}

Answer 2

编辑

我想我上次的想法是错误的，当我重新访问您的链接时，我意识到Script 和CSS 是错误的，这里应该是正确的

首先是CSS：

body, html {
    overflow: hidden;    // So there is no scrollbar
}
.bgwidth {
    width: 100%;    // No more need to use top:50%
}
.bgheight {
    left: 50%;    // No more need to use height:100%, because you never set the height, so it should always be 100%
}

其次是Script：

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

function resizeBg() {
    var heightDifference = (theWindow.height() - $bg.height()) / 2;

    if ((theWindow.width() / theWindow.height()) < aspectRatio) {
        $bg.removeClass().addClass('bgheight');
        $bg.css("margin", heightDifference + "px 0 0 -" + imgWidth / 2 + "px");
    } else {
        $bg.removeClass().addClass('bgwidth');
        $bg.css("margin", heightDifference + "px 0 0 0");
    }
}
theWindow.resize(resizeBg).trigger("resize");

注意与之前的区别，imgWidth 和 imgHeight 不再除以 2，resizeBg 函数内部还有另一个 var 用于计算 window 和 img 之间的高度差除以2、然后在css上，设置margin-top和heightDifference（因为总是从顶部开始，所以不用top: 50%），如果是bgheight，就设置margin-left 也有一半 imgWidth

所以基本上它总是垂直的centeringimage，然后如果width比窗口大，它将水平居中image

这是更新后的Fiddle

旧答案

在查找您的网站后，我发现您正在使用 position: fixed 作为图片，在这种情况下，您可以使用 left 和 margin 来设置图片位置的样式

您需要将class 样式更改为此

.bgwidth { width: 100%; top: 50%; }        // Center the position vertically
.bgheight { height: 100%; left: 50%; }     // Center the position horizontally

然后在您的脚本中，添加更多代码

function resizeBg() {

    var imgWidth = $bg.width() / 2;
    var imgHeight = $bg.height() / 2;

    if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
        $bg.removeClass().addClass('bgheight');
        $bg.css("margin", "0 0 0 -" + imgWidth + "px");     // margin-left minus half of width
    } else {
        $bg.removeClass().addClass('bgwidth');
        $bg.css("margin", "-" + imgHeight + "px 0 0 0");    // margin-top minus half of height
    }

}

它的作用是，如果类是bgheight，你想让image水平居中，这就是为什么你首先将image的位置设置在中心（left: 50%），然后你设置到0 0 0 x 的边距，其中x 是image 宽度的负一半，因此它将显示图像的中心。上面的代码还没有经过测试，但是如果.css有代码错误应该可以解决

这是一个没有script 的example，只是认为div 是当前窗口

Answer 3

首先对css和变量的重命名感到抱歉。我正在为自己做一些事情，并且正在寻找如何让自己居中图像。我想出了一个解决方案，并认为我会分享它。

$(window).on("load", function() {
  var windowData = $(window),
    wallpaper = $('#wallpaper'),
    aspectRatio = wallpaper.width() / wallpaper.height();

  function resizeWallpaper() {

    var widthLarger = false;

    if ((windowData.width() / windowData.height()) < aspectRatio) {
      widthLarger = true;
      wallpaper.removeClass().addClass('wallpaperHeight');
    } else {
      widthLarger = false;
      wallpaper.removeClass().addClass('wallpaperWidth');
    }

    var imgWidth = wallpaper.width();
    var imgHeight = wallpaper.height();
    var diff = 0;

    if (widthLarger) {
      if (imgWidth > windowData.width()) {
        diff = (imgWidth - windowData.width()) / 2;
      }
      wallpaper.css("margin", "0 0 0 -" + diff + "px");
    } else {
      if (imgHeight > windowData.height()) {
        diff = (imgHeight - windowData.height()) / 2;
      }
      wallpaper.css("margin", "-" + diff + "px 0 0 0");
    }
  }

  $(window).resize(resizeWallpaper).trigger("resize");

});

body,
html {
  overflow: hidden;
}

#wallpaper {
  position: fixed;
  top: 0;
  left: 0;
}

.wallpaperWidth {
  width: 100%;
}

.wallpaperHeight {
  height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<body>
  <img id="wallpaper" src="http://www.planwallpaper.com/static/images/kartandtinki1_free-wallpaper_13.jpg">

</body>

</html>