jQuery calculate img's real height / width values which coming from server

Question

I am in a situation that; need to calculate image's original width and heigth values when one of them defined 0 on css. I can't change CSS with jQuery, need to solve like this:

Here is example link.

CSS:

img { width:0px; }

jQuery:

var imgHeight = $('img').height();
alert(imgHeight);//which returning 0 ofcourse

I hope this is possible with less code, thanks,

First that came to a head. You can create DOM-element `img` set `display: none` and `src` of your image. After image loaded you can get it's real dimensions — d.k, Aug 01 '12 at 18:30

score 5 · Accepted Answer · answered Aug 01 '12 at 18:38

5

Try this:

var img = $("img")[0];
alert( img.naturalWidth + "x" + img.naturalHeight );

http://jsfiddle.net/mjaA3/50/

answered Aug 01 '12 at 18:38

Esailija

138,174
23
272
326

@barlasapaydin because they are properties of the image and not jQuery object – Esailija Aug 01 '12 at 18:47
i can't get this work on my site, need to try harder, thanks. – Barlas Apaydin Aug 01 '12 at 18:51
3

if it works in the demo then it's your responsibility to implement it right – Esailija Aug 01 '12 at 18:52
1

Never knew about `naturalWidth`/`naturalHeight`. Great way to do it. +1. – Purag Aug 01 '12 at 18:55
@Esailija i found these alternate way too http://jsfiddle.net/mjaA3/61/ but didnt work on my site either, i guess; i am dealing with different problem in that site, thanks anyways. – Barlas Apaydin Aug 01 '12 at 19:03
@RobinMaben ofcoure Robin, this was good answer and lightened me that i am having another problem. – Barlas Apaydin Aug 01 '12 at 19:10
i coudn't worked your solution on my site but this way worked: http://stackoverflow.com/questions/318630/get-real-image-width-and-height-with-javascript-in-safari-chrome – Barlas Apaydin Aug 03 '12 at 21:05
1

You werent calling this after the image was loaded? I thought that was a given... – Esailija Aug 03 '12 at 21:14

Purag · Answer 2 · 2012-08-01T18:53:10.140

0

var img = $('img'),
    imgHeight = img.css("width","auto").height();
img.css("width","0");
alert(imgHeight);

Here is a fiddle. All we do is temporarily set the height to it's automatic value (which is the image's 100% width), grab the height, and reset the image to width:0;.

EDIT: Since you can't manipulate CSS directly, you can change the class:

var img = $('img'),
    imgHeight = img.addClass("auto").height();
img.removeClass("auto");
alert(imgHeight);

And the CSS:

img {width:0;}
img.auto {width:auto;}

edited Aug 01 '12 at 18:53

answered Aug 01 '12 at 18:30

Purag

16,941
4
54
75

thanks for answer but cant manipulate css from jQuery, need to solve with this way. – Barlas Apaydin Aug 01 '12 at 18:33
Then there's no other way, sorry. Can you manipulate classes? – Purag Aug 01 '12 at 18:34
yeah, i just cant change width here. – Barlas Apaydin Aug 01 '12 at 18:45

score 0 · Answer 3 · answered Aug 01 '12 at 18:31

0

You could clone the element to a new hidden DOM node (I assume you want to hide it here). Then remove the CSS, then measure the dimensions.

answered Aug 01 '12 at 18:31

Mike Brant

70,514
10
99
103

jQuery calculate img's real height / width values which coming from server

3 Answers3