Javascript 调整大小后获取实际图像大小

我有一个充满缩略图的页面，用css将其大小调整为150x150，当我点击缩略图时，页面变暗，图像以真实大小显示

目前，我必须手动创建一个包含所有图像实际高度的数组。为了解决设计问题+减少对我的图库的手动操作，我需要在调整图像大小（CSS）后获得图像的实际高度

我试过：

var imageheight = document.getElementById(imageid).height;

以及：

---

但两者都返回与CSS一起分配的

150px

属性。我怎样才能解决这个问题？谢谢

一种方法是创建一个单独的图像对象

function getImageDimensions(path,callback){
    var img = new Image();
    img.onload = function(){
        callback({
            width : img.width,
            height : img.height
        });
    }
    img.src = path;
}

getImageDimensions('image_src',function(data){
    var img = data;

    //img.width
    //img.height

});

---

这样，您将使用相同的图像，但不会使用DOM上的图像，因为DOM修改了维度。据我所知，缓存的图像将使用此方法回收。因此，无需担心额外的HTTP请求。

您有“天然”kws来帮助您：

使用js：

var imageheight = document.getElementById(imageid).naturalHeight;

或者使用jquery

var imageheight = $('#' + imageid).naturalHeight;

---

@Dinesh的答案是只使用

naturalHeight

和

naturalWidth

属性，这很好，可能应该是公认的答案

我只是想在这里添加两件事，可以节省人们的时间，因为我看到了很多关于这个问题的帖子，我自己也花了很多时间在上面

naturalHeight

如果在加载图像之前调用，则可能返回

0

或

undefined

。仅设置

src

属性可能并不意味着立即加载图像。我发现最好是在

onload

中获取它

$('selector')[0].onload = function() {
  alert(this.naturalHeight);
  alert(this.naturalWidth);
}

如果不使用

此

，只使用

$（“选择器”）。自然高度可能不起作用。您可能需要访问关联的DOM元素，即
$（'selector'）[0]。naturalHeight
或
$（'selector'）。获取（0）。naturalHeight
，因为我们使用的是本机Javascript的属性
naturalHeight
。有关更多详细信息，请参阅

---

可能是复制的，所以您正在加载所有的全尺寸图像，而不是制作正确的缩略图？哎哟…我正在加载全尺寸图像，并在单击缩略图时显示它。对于IE9+和任何其他主要浏览器，这些属性都是有效的。这是一个很好的答案！可能有人为此包装了一个jQuery插件。如果没有，这可能很有趣。我花了几个小时想知道为什么

naturalWidth

返回了

undefined

，现在我知道了原因（+1）。

$('selector')[0].onload = function() {
  alert(this.naturalHeight);
  alert(this.naturalWidth);
}