Question

我有一个用缩略图填充的页面，用css调整大小到150x150，当我点击缩略图时，页面变暗，图像显示为真实尺寸。

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

我试过了：

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

和

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

但两者都返回CSS分配的150px属性。我怎么解决这个问题？感谢

Answer 1

你有'天生'的kws来帮助你：

使用js：

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

或使用jquery

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

Answer 2

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

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请求。

Answer 3

@Dinesh仅使用naturalHeight和naturalWidth属性的答案很好，可能应该是公认的答案。

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

naturalHeight可能会返回0或undefined 。仅设置src属性可能并不意味着图像会立即加载。我已经知道最好在onload中获取它。
```
$('selector')[0].onload = function() {
  alert(this.naturalHeight);
  alert(this.naturalWidth);
}
```
如果不使用this，则仅 $('selector').naturalHeight可能不起作用。您可能需要访问关联的DOM元素，即$('selector')[0].naturalHeight或$('selector').get(0).naturalHeight，因为我们使用的是本机Javascript的属性naturalHeight。有关更多详细信息，请参见this SO post。

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

3 个答案: