获得缩放图像的高度

Getting height of scaled image

本文关键字：高度 图像 缩放      更新时间：2023-09-26

我正在获取图像的原始大小。有css应用到图像通过max-width:473px;和高度是由浏览器自动调整大小。但是在图像load event中，我得到了原始的，未缩放的大小。

所以基本上原始图像大小为506x337, css规则后图像变为473x315。如何在load event中获得315px的高度?

更新

下面是用于测试的代码片段:http://jsfiddle.net/CXNan/

您也可以使用

this.offsetHeight

看小提琴。它包含只读像素大小，参见参考资料。它在MSIE中得到支持，并且应该是跨浏览器可靠的。

这将给你计算出的元素高度，就像我在评论@ Question中发布的那样。

window.getComputedStyle(document.getElementById("idOfYourImage"), null).getPropertyValue("height")

正如你们已经注意到的，它不是跨浏览器的(也就是说不是IE或旧的东西)。

我已经找到了这个getComputedStyle的IE，但无法测试它。可能是可以的，因为正如http://ie.microsoft.com/testdrive/HTML5/getComputedStyle/所说，旧的IE API被称为currentStyle，这是"getComputedStyle for IE"使用的。

currentStyle的唯一问题是getComputedStyle将总是返回一个像素值，如果可能的话，而currentStyle返回原始值(所以width:50%在css上将返回50%，而不是父元素的50%像素大小)。

将最大宽度除以长宽比，您将得到缩放后的高度。请注意，如果图像小于最大宽度，则不会进行缩放。像这样:

var height = img.width > 473 ? 473 / (img.width/img.height) : img.height;
相关文章：