Получить высоту изображения

Question

Это должно быть легко, но это не так. Мне просто нужна высота изображения:

<div id="map"> 
    <img src="myimage.jpg"> 
</div> 

$("#map img").height(); // returns 0 

Answer 1

Используйте .clientHeight (чистый JavaScript):

https://jsfiddle.net/ryanpcmcquen/v6yz8t3u/

console.log(document.querySelector('img').clientHeight);

<img src="//makelin.us/100/100" />

Читайте на него здесь: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

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

Примечание: Для того, чтобы узнать реальную высоту изображения, используйте .naturalHeight.
Большая статья здесь:https://davidwalsh.name/get-image-dimensions

Чтобы убедиться, что это работает после загрузки изображения, сделайте следующее:

window.addEventListener('load', function() { 
    console.log(document.querySelector('img').clientHeight); 
}); 

Answer 2

Вы можете сослаться следующий пример, чтобы получить высоту

имидж-

<div id="map"> 
    <img id="img_id" src="http://www.clickerzoneuk.co.uk/cz/wp-content/uploads/2010/10/PuppySmall.jpg" > 
</div> 

напишите следующий код в js файле

var height = document.getElementById("img_id").clientHeight; 

alert(height); 

проверка пример с использованием следующей ссылка-

http://jsfiddle.net/v60mut3L/1/

Answer 3

Проблема в том, что высота или ширина еще не рассчитаны, слушать загрузки изображения с .on("load", handler)

$("#map img").on("load", function(){ 
 
    var height = $(this).height(); 
 
    $('#output').html('height=' + height); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script> 
 
<div id="map"> 
 
    <img src="http://placehold.it/400x40"> 
 
</div> 
 
<div id="output"></div>

Answer 4

Это сработало для меня:

$(window).load(function() { 

    var artLists = []; 
    $("ul.articles").each(function (index) { 
     var imageHts = []; 
     $("li img", $(this)).each(function() { 
      imageHts.push($(this)[0].height); 
     }) 
     artLists.push(imageHts); 
    }) 

});