無法獲得img寬度和高度jQuery

我完全與這段代碼混淆。當我只是加載網頁imgWidth1和imgHeight1都等於「0」但是當我調整我的窗口，代碼工作和imgWidth1和imgHeight1具有相同的值作爲圖像尺寸。無法獲得img寬度和高度jQuery

歡迎所有幫助，謝謝。

var imgWidth1 = $("#image-hover-0").outerWidth(); 
var imgHeight1 = $("#image-hover-0").outerHeight(); 

$("#hover-img-0").css("width", imgWidth1 + "px"); 
$("#hover-img-0").css("height", imgHeight1 + "px"); 
$("#hover-img-0").css("line-height", imgHeight1 + "px"); 

$(window).resize(function() { 

    var imgWidth = $("#image-hover-0").outerWidth(); 
    var imgHeight = $("#image-hover-0").outerHeight(); 

    $("#hover-img-0").css("width", imgWidth + "px"); 
    $("#hover-img-0").css("height", imgHeight + "px"); 
    $("#hover-img-0").css("line-height", imgHeight + "px"); 

});

來源

2015-08-21 Simon

如果圖像未完全加載，則可能發生這種情況。你是否確定它在0時滿載？ – cfly24

，因爲圖像尚未加載。請參閱：http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript – Hacketo

有可能這是執行得太早，圖像不可用時調用屬性。你可以嘗試在窗口'load'事件處理程序中包裝它。 – spenibus

這很可能是由於你的代碼不被嵌套在$(window).load()函數調用裏面。修改您的代碼如下：

$(window).load(function(){ 
    var imgWidth1 = $("#image-hover-0").outerWidth(); 
    var imgHeight1 = $("#image-hover-0").outerHeight(); 

    $("#hover-img-0").css("width", imgWidth1 + "px"); 
    $("#hover-img-0").css("height", imgHeight1 + "px"); 
    $("#hover-img-0").css("line-height", imgHeight1 + "px"); 

    $(window).resize(function() { 

     var imgWidth = $("#image-hover-0").outerWidth(); 
     var imgHeight = $("#image-hover-0").outerHeight(); 

     $("#hover-img-0").css("width", imgWidth + "px"); 
     $("#hover-img-0").css("height", imgHeight + "px"); 
     $("#hover-img-0").css("line-height", imgHeight + "px"); 

    }); 
});

來源

2015-08-21 12:54:29

打我5秒 –

如果DOM沒有加載，那麼OP如何檢索'$（「＃hover-img-0」）' – Hacketo

jQuery的'ready'事件並不保證加載圖像，只有DOM 。 – spenibus

我以前遇到過這個問題。但問題仍然是，你想要真正的大小？或屏幕上顯示的大小？

對於第一個，你應該等待加載圖像後，你可以得到真正的大小：

youImage.addEventListener('onload', 
    function() { 
    console.log('pic width is: ', this.naturalWidth); 
    console.log('pic height is: ', this.naturalHeight); 
});

對於第二個，你必須encupsle它在一個div並獲得它的大小。

我希望我的答案可以幫助你。

來源

2015-08-21 13:05:55 Waver

無法獲得img寬度和高度jQuery

回答

相關問題