how to get the height and width of image in javascript?

Question

I have a code where I am trying to get all images tag height and width.

var img = $('.data').find('img');
$.each($(img), function() {
console.log('first', this.height, $(this).height, $(this).height());
console.log('second', $(this).clientHeight, $(this).naturalHeight);
console.log('third',  $(this)[0].height,  $(this)[0].clientHeight,  $(this)[0].naturalHeight);
console.log($(this).attr('height'), $(this).prop('height'));                                                                                                     });

Even i tried for img in loop.

tried the same with width , the result will be either 0 or undefined. tried same thing for width.

Can you tell me where I am doing wrong

Swati · Accepted Answer · 2020-05-29 07:15:28Z

1

You are passing $(img) this should be only img inside you $.each.Also you where printing console.log('first',.. instead of this if your image has name attribute use that .

Here is demo code :

var img = $('.data').find('img');
$.each(img, function() {
  console.log($(this).attr("name") + "-> Height: " + $(this)[0].height + " Width:" + $(this)[0].width);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data">
  <img name="image1" src=" https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/[email protected]" style="height:70px;width:70px">
  <img name="image2" src=" https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/[email protected]" style="height:40px;width:40px">
  <img name="image3" src=" https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/[email protected]" style="height:50px;width:50px">
</div>

answered May 29, 2020 at 7:15

Swati

28.5k4 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

chandana Gowda Over a year ago

thank you for replying, even i tried for img , but the result is same

chandana Gowda · Accepted Answer · 2020-05-29 17:28:26Z

0

i was not getting the height and width of an image because the image load event happens very late in the load process

Finally I found an answer

var img = $('.data').find('img');
$.each(img, function() {
  $(this).bind('load', function() { 
    console.log($(this).height);
  }
});

it worked for both img and $(img)

answered May 29, 2020 at 17:28

chandana Gowda

738 bronze badges

Collectives™ on Stack Overflow

how to get the height and width of image in javascript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related