Question

我要做的是使用这一点jQuery来居中图像。我的图片选择器是“.section-header img”。

var image_center = function(){

    var imageWidth = $('.section-header img').width();
    var windowWidth = $(window).width();
    var centerFix = -(imageWidth-windowWidth)/2 ;

    console.log(imageWidth, windowWidth, centerFix);

    $('.section-header img').css({'left': centerFix});


}

我在文档准备好以及调整窗口大小时调用该函数：

$(document).ready(function(){

    image_center();

    $(window)resize(function(){
        image_center();
    }

我的问题是，当窗口最初加载时，我无法使该功能正常工作。在我的控制台中查看，浏览器将图像读取为与浏览器具有相同的宽度。调整浏览器大小后，将读取图像的实际宽度。是否有内置于Chrome中的东西让我在这里绊倒？有没有更简单的方法（不使用背景图像）？

谢谢，

CPR

Answer 1

使用css可能更容易完成这项工作。

.section-header {
     background-image: url("/path/to/image.jpg");
     background-position: center;
     background-size: contain;
     background-repeat: no-repeat;
}

Answer 2

不确定您是否也希望img调整大小。

以下是调整大小和img标记+ section-header div或其他内容的示例：

.section-header{
  width: 50%;
  left: 25%;
  margin-left: auto;
  position: absolute; 
}

img{
  width: 100%;
  height: 100%;
}

<div class="section-header">
  <img src="http://placehold.it/350x150" alt="">
</div>

https://jsfiddle.net/Lj4mfqLa/

<强>更新

您还可以尝试将jquery代码包装在：

中

$(window).load(function(){  
    //initialize after images are loaded  
});

而不是

$(document).ready(function(){})

宽度大于窗口大小的图像最初加载的宽度与窗口

2 个答案: