Question

我在页面上有一个图像已调整大小以适合div，例如400x300。如何在jQuery中获得图像的完整大小（~4000x3000）？ .width（）和.height（）似乎只返回图像的当前大小。

Answer 1

图片包含naturalWidth和naturalHeight属性，其中包含图片的实际未修改宽度和高度，即图片的实际尺寸，而不是CSS设置的尺寸。

仍然需要等待图片加载

$('#idOfMyimg').on('load', function() {
    var height = this.naturalHeight,
        width  = this.naturalWidth;
});

另一种选择是使用与源相同的文件创建一个新图像，并从中获取尺寸，只要它从未添加到DOM，外部样式不会影响它

var img = new Image();

img.onload = function() {
   var height = this.height,
       width  = this.width;
}
img.src = $('#idOfMyimg').attr('src');

FIDDLE

Answer 2

您可以克隆图像，删除高度和宽度属性，将其附加到正文并获取宽度和大小，然后再将其删除。

jsFiddle演示在这里：http://jsfiddle.net/58dA2/

代码是：

$(function() {
   var img = $('#kitteh'); // image selector
   var hiddenImg = img.clone().css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('body');
    $('#height').text(hiddenImg.height());
    $('#width').text(hiddenImg.width());
    hiddenImg.remove();            
});

Answer 3

您可以使用包含相同源文件的Image对象执行此操作，如：

var preloader = new Image();
preloader.src = 'path/to/my/file.jpg';

preloader.onload = function(){
var height = preloader.height;
var width = preloader.width;
}

Answer 4

试试这个：

var pic = $（“img”）

//需要删除这些内容，img-element设置了宽度和高度 pic.removeAttr（ “宽度”）; pic.removeAttr（ “高度”）;

var pic_real_width = pic.width（）; var pic_real_height = pic.height（）;

在javascript / jquery中获取完整大小的图像

4 个答案: