17

我有一个充满缩略图的页面，用 css 调整大小150x150，当我单击缩略图时，页面变暗，并且图像以其真实尺寸显示。

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

我试过了：

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

和：

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

但两者都返回150px用 CSS 分配的属性。我该如何解决这个问题？谢谢

4

3 回答 3

27

你有“自然”的知识来帮助你：

用js：

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

或使用 jquery

var imageheight = $('#' + imageid).naturalHeight;
于 2012-05-07T11:40:02.083 回答
18

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

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 上已修改尺寸的图像。据我所知，缓存的图像将使用这种方法回收。所以不用担心额外的 HTTP 请求。

于 2012-05-07T08:04:58.737 回答
1

@Dinesh 仅使用naturalHeightandnaturalWidth属性的答案很棒，可能应该是公认的答案。

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

  1. naturalHeight可能会返回0，或者undefined如果在图像加载之前调用。仅仅设置src属性可能并不意味着图像会立即加载。我已经看到最好把它拿进来onload。

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

  2. 如果不使用this，$('selector').naturalHeight可能无法正常工作。您可能需要访问相关的 DOM 元素$('selector')[0].naturalHeight，或者$('selector').get(0).naturalHeight因为我们使用的是原生 Javascript 的属性naturalHeight。有关更多详细信息，请参阅此 SO 帖子。

于 2020-03-09T10:09:58.057 回答