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

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 中是否有一些内置的东西让我在这里绊倒？有没有更简单的方法（不使用背景图片）？

谢谢，

心肺复苏术

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(){})