Question

我完全混淆了这段代码。当我只是加载页面 imgWidth1 和 imgHeight1 都等于＆＃34; 0＆＃34; 但是当我调整窗口大小时，代码有效且 imgWidth1 和 imgHeight1 与图片维度具有相同的值。

欢迎所有帮助，谢谢。

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");

});

Answer 1

这很可能是因为您的代码未嵌套在$(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");

    });
});

Answer 2

我之前遇到过这个问题。但问题仍然是，你想要真正的尺寸吗？或屏幕上显示的尺寸？

对于第一个，您应该在获得实际尺寸后等待图像加载：

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

对于第二种情况，你必须在div中使用它来获取它的大小。

我希望我的回答可以帮到你。

无法获得img宽度和高度jQuery

2 个答案: