Getting the width of an image without an assigned width using jquery

Question

I have the following code which needs to get the width of an image which is dynamically loaded, when a thumbnail is clicked on.

$("<img class='mypopupimage' src='" + imgSrc + "' style='padding:10px;' width='500' />").appendTo("div.mydiv");

var imgWidth = $(".mypopupimage").width();

The trouble I have is that the popup images are all different widths, but when I remove the width attribute from the image the imgWidth variable gets set to 0.

Any ideas?

Dublicate of this: Try $(".mypopupimage").attr("naturalWidth"); — Sgoettschkes
– Sgoettschkes, Commented Aug 31, 2011 at 9:17
Awesome, thanks... if you add this as an answer I can accept it as the correct one... — Tom
– Tom, Commented Aug 31, 2011 at 9:25
possible duplicate of How to get image size (height & width) using javascript? — user447356
– user447356, Commented Aug 31, 2011 at 9:27
Tom just upvote the accepted answer in the duplicate if it helped you as well. — user447356
– user447356, Commented Aug 31, 2011 at 9:28

Community · Accepted Answer · 2017-05-23 12:12:06Z

1

This has already been answered multiple times on stack, however, here it is for ease:

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;

This answer is taken from here

edited May 23, 2017 at 12:12

CommunityBot

11 silver badge

answered Aug 31, 2011 at 9:25

jkfuyaflkjd

6821 gold badge8 silver badges25 bronze badges

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

Comments

Sgoettschkes · Accepted Answer · 2011-08-31 11:24:38Z

0

You should use the attribute naturalWidth if you want to use jQuery or go with the "normal" javascript as stated by udjamaflip:

$("<img class='mypopupimage' src='" + imgSrc + "' style='padding:10px;' width='500' />").appendTo("div.mydiv");
var imgWidth = $(".mypopupimage").attr('naturalWidth');

answered Aug 31, 2011 at 11:24

Sgoettschkes

13.2k5 gold badges62 silver badges78 bronze badges

Collectives™ on Stack Overflow

Getting the width of an image without an assigned width using jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related