如何获得具有自动高度的100％宽度图像的高度？

Question

在这种情况下，我将图像的width: 100%设置为width: 100% ， height: auto设置为height: auto （实际图像尺寸为362x614）。 我需要获取图像的高度，用于下一步。

这是我的代码：

<img class="phone" src="img/phone2.png">

和js：

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

$(window).resize(function(){
   phoneSlider()
});

function phoneSlider(){
   var phoneMaskWidth = $(".phone").width();
   var phoneMaskHeight = $(".phone").height();
       console.log(phoneMaskWidth + "|" + phoneMaskHeight);
       .......
}

然后，我在控制台中检入结果： 362|0 。 为什么phoneMaskHeight显示为0，如何获得实际高度？

Answer 1

采用：

var img = new Image();
img.onload = function() {
alert(this.width + 'x' + this.height);
}
img.src = $(".phone").attr('src');

工作小提琴

Answer 2

将您的代码从$(document).ready()移至$(window).load() 。 浏览器需要先加载图像（或至少图像标题），然后才能计算其宽度和高度。 在浏览器有机会查看图像之前 ，可能会触发文档就绪事件。

演示在这里 ; 更改图像源（或清空浏览器缓存），运行并查看控制台

Answer 3

$("img.phone").on('load', function() { alert( this.height ); });

这对我有用。

Answer 4

浏览器异步加载图像，直到完全加载图像为止，其高度是未知的。

正如其他人所建议的那样，您需要将代码附加到加载图像时触发的“ onload”事件，但这将迫使您更改整个phoneSlider方法。 您需要将所有取决于图像高度的内容放入相应的onload回调中。

如果您不需要在加载图像后立即进行计算，则Salman A的答案是更好的方法-在触发window＃onload事件时放置您的逻辑，这样可确保加载所有外部资源（包括图像） 。

Answer 5

$（文件）。就绪（函数（）{
console.log（$（'＃myimg'）。width（）+'x'+ $（'＃myimg'）。height（））;

的console.log（$（ “＃myimg”）ATTR（ 'SRC'））;

}）

工作演示[http://jsfiddle.net/A5QJM/238/]