0

This should be easy but it's not. I just need the height of an image:

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

$("#map img").height(); // returns 0
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
The Hawk
  • 1,496
  • 6
  • 26
  • 43
  • Add _complete_ code, when you are trying to get the image height – Tushar Oct 27 '15 at 14:00
  • 6
    Possible duplicate of http://stackoverflow.com/questions/16084374/jquery-width-and-height-return-0-for-img-element – Java_User Oct 27 '15 at 14:01
  • 1
    Possible duplicate of [How to get image size (height & width) using JavaScript?](http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript) – Ullas Oct 27 '15 at 14:06
  • `This should be easy but it's not` really? :P http://stackoverflow.com/a/623174/3681882 – Swastik Padhi Oct 27 '15 at 14:09

4 Answers4

2

Use .clientHeight (pure JavaScript):

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

console.log(document.querySelector('img').clientHeight);
<img src="//makelin.us/100/100" />

Read up on it here: https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight

Note that this will give you the height as the image appears on the page, it could be affected by CSS.

Note: To get the actual height of the image, use .naturalHeight.
Great article here: https://davidwalsh.name/get-image-dimensions

To make sure this runs after the image has loaded, do:

window.addEventListener('load', function () {
  console.log(document.querySelector('img').clientHeight);
});
ryanpcmcquen
  • 6,285
  • 3
  • 24
  • 37
2

The problem is that the height or width are not calculated yet, listen to the loading of the image with .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="https://via.placeholder.com/400x40">
</div>
<div id="output"></div>
turbopipp
  • 1,245
  • 2
  • 14
  • 27
  • Likely true but already posted about half an hour earlier in the comments. By the way, `load()` used like this has been deprecated for a while. This is the correct link : http://api.jquery.com/load-event/. – Shikkediel Oct 27 '15 at 14:52
  • Seems like since 1.8, you are right. But substitute with `.on( "load", handler )` should be ok, right? – turbopipp Oct 27 '15 at 14:56
  • 1
    Basically yes but I think there's a bit more to it than that. If the image has been cached, the load event will not fire - and neither will the height calculation in that case. So a broader approach might be to listen for the `window` onload event (which will always be correct) or do a check beforehand using `.complete` which is the indicator for the image being loaded already. But that last bit would just be needed if one would like to save some time and might overcomplicate things. The accepted answer in the link that was upvoted in the comments isn't really treating this correctly either. – Shikkediel Oct 27 '15 at 15:02
  • Ahh yes, window onload event is better in this scenario. :) – turbopipp Oct 27 '15 at 15:07
  • I used window onload and it still didn't work. All the images come back with 0 height. It must be because they are cached? – The Hawk Oct 28 '15 at 18:09
0

You can refer following example to get height of image-

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

write following code in js file

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

alert(height);

check example using following link-

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

Domain
  • 11,562
  • 3
  • 23
  • 44
-1

This worked for me:

$(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);
    })

});
The Hawk
  • 1,496
  • 6
  • 26
  • 43