Question

我正在引用CSS Trick的整页背景并使用我在这里完美运行的Jquery方法：www.oxbowdesigns.com

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

以下两张图片展示了现在正在发生的事情以及我的目标：

这是我正在使用的代码：

$(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保证金：50％;和其他CSS技术没有运气。任何指导将不胜感激！

谢谢，克里斯

Answer 1

下面的代码可以满足您的需求：这是css方法，无需使用js

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，而var函数中还有另一个resizeBg来计算window函数之间的高度差{1}}和img除以2，然后在css上，margin-top设置为heightDifference（因为它始终从顶部开始，所以没有需要使用top: 50%），如果是bgheight，则将margin-left设置为imgWidth的一半

所以基本上它总是centering image垂直，然后如果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的位置设置在中心（{{1然后，您将边距设置为left: 50%，其中0 0 0 x是x宽度的负半边，因此它将显示图像的中心。上面的代码尚未测试，但如果image

中存在一些代码错误，您应该能够解决它

这是example没有.css，只是认为script是当前窗口

Answer 3

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

＆＃13;

String urlParameters = URLEncoder.encode ("idRoute", "UTF-8") + "=" + URLEncoder.encode ("1", "UTF-8");
wr.writeBytes(urlParameters);

＆＃13;

$(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");

});

＆＃13;

body,
html {
  overflow: hidden;
}

#wallpaper {
  position: fixed;
  top: 0;
  left: 0;
}

.wallpaperWidth {
  width: 100%;
}

.wallpaperHeight {
  height: 100%;
}

＆＃13;

以全屏响应图像为中心 - Jquery方法

3 个答案:

修改

旧答案