CODEWITHSUNDEEP
jquerycssimageheightwidth
Sejin Jeon
Sejin Jeon

Reputation: 335

JQuery - How to get width or height of image which is automatically determined by proportion?

When I use "img" tag, if I set only the width and don't set height value in css, the height value of image will be calculated by proportion automatically.

But I found that I can neither find the height value with developer tools or get that value with jQuery height() method. Below is an example:

HTML code

<img id="cat" src="./cat.png"/>

CSS code

img#cat {
    width:10em;
}

jQuery code

$(function() {
    alert($('img#cat').height());  // It returns 0 because there is no explicitly declared height value
});

Is there a proper jQuery method?

Upvotes: 2

Views: 432

Answers (1)

Tom
Tom

Reputation: 1686

You are trying to access the image before it has even loaded. Try this:

$("#cat").load(function() {
  console.log("Image height: " + this.height)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id="cat" src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a_400x400.jpeg">

Upvotes: 1

Related Questions