Get image size using JQuery/ javascript

11,800

Solution 1

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());
});

If you need the real size, please see this question Get the real width and height of an image with JavaScript? (in Safari/Chrome)

Solution 2

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

Solution 3

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:

Share:
11,800

Related videos on Youtube

Dr. Rajesh Rolen
Author by

Dr. Rajesh Rolen

Over 15 years of successful experience in development of multi-tier applications and system integration solutions as application architect, project leader, technical lead, and software engineer. Very good understanding of application analysis and design concepts. Strong ability to apply proven design patterns to the system design and employ extreme programming and SCRUM techniques to the robust implementations. PhD (Computer Science & Engineering), MCA, BCA, MCTS, MCP, SCJP. Experience of working in the complete Software development life cycle involving SRS, Software architecture design, database design, Code Reviews, development, and documentation. Capable to delve into the new leading Technologies. Ability to work well in both a team environment and individual environment. Ability to train the team. Areas of Expertise Strong in Architecture design, Design Principles, Design Patterns and OOPs concepts. Capable of developing cross-platform code and managing project. Web applications and web services development using ASP.NET MVC with C#.NET/ VB.NET. Client-Server based applications developed using C#.NET and VB.NET Strong in Business requirement analysis and functional specification design and documentation. Through knowledge of Object Oriented Analysis and Design OOAD and N - Tier Architecture Strong in front-end GUI development using ASP.Net, HTML, JavaScript, JQuery. Strong in backend database development including designing and administering databases, - writing stored procedures, SQL and triggers for SQL Server, Oracle, and My-SQL databases. Strong Analytical Skills. Strong oral and written communication skills Download CV

Updated on May 13, 2022

Comments

  • Dr. Rajesh Rolen
    Dr. Rajesh Rolen 16 days

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

  • SIFE
    SIFE over 9 years
    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.
  • alexn
    alexn over 9 years
    @SIFE Yes, it is possible in newer browsers. Please ask this in a new question.
  • SIFE
    SIFE over 9 years
    See my question pls. stackoverflow must star thinking on url shortening service.