如何获得一个img元素的动态高度？

Question

我正在改变 src 的 img 而我加载的图片并不总是有相同的高度。我想得到图片的高度，这样我就可以使用jQuery来正确地调整它的大小和位置。

我怎样才能得到图片的高度呢？img 元素的高度被设置为自动，而其父元素的高度也被设置为自动？

试着 .parentNode 对我来说没有用。.outerHeight() 而 .height() 返回 0. 还有什么其他的解决办法？

Answer 1

图片是异步加载的。你不能立即查看它的高度，否则返回的高度总是0，你需要等到图像加载完毕后再查询它的高度。举个例子。

let img = document.querySelector("img");
img.addEventListener("load", function() {
	console.log(this.offsetHeight);
});

<img src="https://source.unsplash.com/random">