寬度大於窗口大小的圖像最初以與窗口相同的寬度加載

我想要做的是使用這一點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

來源

2016-09-05 CandyPaintedRIMS

是不是有一個原因，你不只是居中圖像？ https://jsfiddle.net/enry/g87ngc22/ – henry

它可能是更容易使用的CSS這項工作。

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

來源

2016-09-05 21:18:30

這絕對是一種簡單的方式，但我使用wordpress插入圖像，所以這不是一個選項。非常感謝 – CandyPaintedRIMS

不確定您是否也希望img調整大小。

這裏是一個調整大小的例子，你的img標籤+節頭格或不管它是什麼：

.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/

UPDATE：

你也可以嘗試換您的jquery代碼：

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

而不是

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

來源

2016-09-05 21:25:20 toerd

感謝您的答覆。這將無法正常工作，因爲我填充的div寬度爲100％，圖像更寬。我正在使用overflow：hidden;只顯示適合div的圖像部分，我寫的jQuery函數scoots圖像要在div中居中。主要問題是，瀏覽器最初不會識別圖像的全部寬度，只有窗口的寬度....它令人困惑，所以我很抱歉，如果我沒有解釋得很好 – CandyPaintedRIMS

@CandyPaintedRIMS你可以嘗試更新 - 對不起，簡短的答案必須讓我的女朋友的火車站; P – toerd

@CandyPaintedRIMS做了window.load做你的工作或你需要進一步的想法？（： – toerd

寬度大於窗口大小的圖像最初以與窗口相同的寬度加載

回答

相關問題