CODEWITHSUNDEEP
jquerydom
Marcos Buarque
Marcos Buarque

Reputation: 3418

Image height using jQuery .attr gets the size of the parent element, rather than the actual image height attribute in Chrome

I have an image which is inside a regular DIV. Let's call it DIV b. Above DIV b there is another DIV, which I will call DIV a. DIV a has overflow: hidden. Here is the code:

<div id="a">
  <div id="b">
    <img id="image" src="http://fgjdfgsjh.com/images/hghgajfhsd.jpg" height="186" width="900">
  </div>
</div>

... here some important CSS for this example:

#a {overflow: hidden; height: 128px;}

... and finally some .js:

<script>
  $(document).ready(function(){
     var test = $('#image').attr('height');
     alert(test);
  });
</script>

As you can see, the image has the height attribute already set on it. My script (jQuery) needs to grab that information, but when I use $('#image').attr('height'), the script is delivering me the number 128, which is the height of the #a element that contains #b and the image, rather than the expected height of the image, which is 186 and is set as an attribute in the HTML.

This is happening in Chrome. Firefox can get the right height of the image (186, instead of 128).

How can I get the actual original height of the image in Chrome? Is it possible to do it with plain simple jQuery, or do I have to do some gimmick (like reloading the image in a separate object and checking its original height)?

Upvotes: 0

Views: 202

Answers (2)

Marcos Buarque
Marcos Buarque

Reputation: 3418

Chrome has an erratic behavior on this issue. I tried code provided by @Mooseman, but when refreshing the page over and over, sometimes the script would pop 128px, sometimes it would pop 186px!

Looks like the only way to do this consistently is by loading the image dynamically. I have borrowed code from here: "getting width and height of a dynamic image".

In the end, the code is:

  $('<img/>').attr('src', $('#image').attr('src')).load(function() {
    // Then just get the resulting loaded image height by using:
    var myHeight = this.height;
  }

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

CSS is generally preferred to the height attribute. To use jQuery, use .css:

$('#image').css('height');

Which will return 186px here. If you only want 186, use .height:

$("#image").height();

Upvotes: 1

Related Questions