JQuery - 如何获取由比例自动确定的图像的宽度或高度？

Question

当我使用“img”标签时，如果我在css中只设置宽度而不设置高度值，图像的高度值将自动按比例计算。

但我发现我无法使用开发工具找到高度值，也无法使用 jQuery height() 方法获取该值。下面是一个例子：

HTML 代码

<img id="cat" src="./cat.png"/>

CSS 代码

img#cat {
    width:10em;
}

jQuery 代码

$(function() {
    alert($('img#cat').height());  // It returns 0 because there is no explicitly declared height value
});

有合适的 jQuery 方法吗？

Answer 1

您正在尝试在图像加载之前访问它。试试这个：

$("#cat").load(function() {
  console.log("Image height: " + this.height)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="cat" src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a_400x400.jpeg">