Получить каждое изображение естественной высоты с помощью jQuery

Question

Я должен прочитать естественную высоту каждого изображения, и я должен сделать вычисления. Однако у меня есть некоторые проблемы с чтением на естественную высоту.

$('div.imgkirp img').each(function(){
    console.log($(this).naturalHeight);
});

Он получает: (количество изображений) не определено в журнале консоли. Как я могу прочитать естественную высоту каждого из изображений?

Answer 1

var image = new Image();
image.src = $(this).attr("src");
alert('width: ' + image.naturalWidth + ' and height: ' + image.naturalHeight);

Этот подход не работает в IE 8 и ниже, потому что он не поддерживает свойства "naturalWidth" и "naturalHeight". Чтобы добиться того же, используйте этот код

var image = new Image();
image.src = $(this).attr("src");
image.onload = function() {
console.log('height: ' + this.height);
};

Answer 2

Попробуйте использовать собственность naturalHeight изображения, используя prop метод jQuery

$('div.imgkirp img').each(function(){

   console.log($(this).prop('naturalHeight'));
});

Answer 3

Базовый расчет для получения естественной ширины и естественной высоты.

var width = $("img", this).css('width', 'auto').width();
var height= $("img", this).css('height', 'auto').height();