jQuery - get the width of an image

Question

I am trying to get the actual width of an image...here is the image in question

<img src="upload/<?php echo $array['image'] ?>" height="200" class="active" />

and this what I have tried in jQuery

$(window).bind('load', function() {  
    var img_width = $("#slideshow").find("img").width();
    $("#slideshow img").css("width", img_width);
    alert(img_width);
});

the alert returns 255 for every images i've tried this with, which is the width of the div slideshow. with the height of these images all being 200 they will have different widths, my question is, how do I get these widths?

Thanks, J

check this might have been answered already: http://stackoverflow.com/questions/2395931/how-do-i-get-actual-image-width-and-height-using-jquery — sakhunzai, Apr 04 '12 at 18:22

score 1 · Answer 1 · answered Apr 04 '12 at 18:26

1

This should populate an array with the widths of all your images:

$(window).bind('load', function() {  
    var img_widths = [];
    var imgs = $("#slideshow").find("img");
    imgs.each(function() {
      img_widths.push($(this).width());
    });
});

answered Apr 04 '12 at 18:26

JoshNaro

2,015
2
22
37

3

`.bind()` is out of date and should use `.on()` instead. http://api.jquery.com/bind/ – Sparky Apr 04 '12 at 18:29
ummm, this doesnt appear to apply to my images – user1274810 Apr 04 '12 at 18:31

score 0 · Answer 2 · answered Apr 04 '12 at 18:22

0

If #slideshow contains more than one img, your call to $("#slideshow").find("img").width(); will only return the first img width, which in this case, must be 200

answered Apr 04 '12 at 18:22

nathanjosiah

4,253
4
33
46

thecodeparadox · Answer 3 · 2012-04-04T18:43:42.443

0

var $imgs = $('img');
$imgs.load(function(){
    console.log($(this).width());
});

edited Apr 04 '12 at 18:43

answered Apr 04 '12 at 18:29

thecodeparadox

81,835
21
131
160

when I inspect the element, the width attribute does not appear :( – user1274810 Apr 04 '12 at 18:34

score 0 · Answer 4 · answered Apr 04 '12 at 18:37

I'm going to give you the answer you didn't ask for - but what I think is the better solution.

Only because I see you are using PHP in the image itself - why not just write the imagesize info with PHP. Its better and doesn't wait for load.

<?php 
// path from document root seems to work best for me
list( , , , $attr) = getimagesize($_SERVER['DOCUMENT_ROOT'] . "/upload/".$array['image']);
?>
<img src="upload/<?php echo $array['image'] ?>" <?php echo $attr; ?> class="active" />

that gets the size of the actual image from the server, what I am looking for the width of the image when the height is 200 — user1274810, Apr 04 '12 at 18:49

jQuery - get the width of an image

4 Answers4