Determining Image Dimensions Using JavaScript

Do you need to programmatically access the dimensions of an image displayed on your web page? JavaScript offers a simple solution.

Solution:

JavaScript provides a straightforward approach to retrieve image dimensions:

1. Create a new Image object:

   const img = new Image();

2. Set the onload event listener to capture the image dimensions when it becomes available:

   img.onload = function() {
     alert(this.width   'x'   this.height);
   }

3. Load the image:

   img.src = 'http://www.google.com/intl/en_ALL/images/logo.gif';

Upon image loading, the onload event triggers and displays the image's width and height in an alert box. By using this technique, you can easily access the size of any image on your web page.