Getting the height of an image in javascript

Question

I have this image : <img style="border-bottom-right-radius:0px;" id="cover_image" src="Daft+Punk+Tron+Legacy.jpg" alt="cover" width="851" /> , I have set the width of the image and the photo automatically keeps aspect ratio and resize both width to 851 and height to a certain value, I want to grab the height value with Javascript but it's not working

So far I have tried this:

$(document).ready(function() {
    alert($("#cover_image").height());
});

When I try

$(document).ready(function() {
        alert($("#cover_image").width());
    });

it works and it shows 851 which is the correct value of the width, but when I use height is returns 0.. can you point me in the right direction please ?

please refer below URL http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript — Manish Parmar, Jun 27 '13 at 10:53
@Mac It's `height()`, not `height`, which is meant to be the computed value: http://api.jquery.com/height/ — Danny Beckett, Jun 27 '13 at 10:57
I have that image and by setting the width a value, it automatically resizes to that width and an unknown height keeping the aspect ratio of the image, I want to grab that height with javascript, that's it. — southpaw93, Jun 27 '13 at 11:05

score 2 · Accepted Answer · answered Jun 27 '13 at 11:07

2

Use onload event of the image:

$("#cover_image").on('load',function(){
    if(this.complete) alert($(this).height());
});

answered Jun 27 '13 at 11:07

A. Wolff

74,033
9
94
155

you are the master of javascript, thank you so much it worked :) – southpaw93 Jun 27 '13 at 11:08

score 1 · Answer 2 · answered Jun 27 '13 at 11:09

clientWidth and clientHeight are DOM properties that show the current in-browser size of the inner dimensions of a DOM element (excluding margin and border). So in the case of an IMG element, this will get the actual dimensions of the visible image.

var img = document.getElementById('imageid'); 
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;

Thanks AB

Getting the height of an image in javascript

2 Answers2