Get image size using JQuery/ javascript

Question

please tell me how to get image size of all images in the page using jquery or javascript

possible duplicate of [How to get image size (height & width) using JavaScript?](http://stackoverflow.com/questions/623172/how-to-get-image-size-height-width-using-javascript) — Anthony Hatzopoulos, Oct 15 '14 at 14:28

score 4 · Accepted Answer · edited May 23 '17 at 12:14

4

The only size you can get is the visible size. clientWidth and clientHeight are two DOM properties which do this. Example:

var image = document.getElementById("id");
var width = image.clientWidth;
var height = image.clientHeight;

If you're using jQuery, you can simply use $.width and $.height:

var width = $("id").width();
var height = $("id").height();

So, to get the size of all images, loop them through:

$("img").each(function()
{
    console.log(this.width());
    console.log(this.height());
});

edited May 23 '17 at 12:14

Community

answered Dec 29 '10 at 07:44

alexn

I have a form to upload an image, is there any way to get image dimensions on the client side before I process it on server side. – SIFE Nov 14 '12 at 00:15
@SIFE Yes, it is possible in newer browsers. Please ask this in a new question. – alexn Nov 14 '12 at 06:18
See my [question](http://stackoverflow.com/questions/13390167/how-to-get-image-dimensions-on-the-client-side) pls. stackoverflow must star thinking on url shortening service. – SIFE Nov 15 '12 at 01:18

score 2 · Answer 2 · answered Dec 29 '10 at 07:43

2

$('img').each(function() {
   $(this).width(); // current image's width
   $(this).height(); // current image's height
});

answered Dec 29 '10 at 07:43

Tatu Ulmanen

score 1 · Answer 3 · answered Dec 29 '10 at 07:43

please tell me how to get image size of all images in the page using jquery or javascript

You can use width() and height() method of jQuery:

$('img').each(function(){
   alert('width=' + $(this).width() + '\nHeight=' + $(this).height());
});

More Info:

3 Answers3