居中全屏响应图像-jQuery方法

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

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

这是更新的小提琴

旧答案

在寻找您的网站之后，我发现您使用的是position: fixed ，在这种情况下，您可以使用left margin和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
    }

}

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

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

Answer 3

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

 $(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>