无法获得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

回答

相关问题