Natural Width and Height of Images

I stumbled upon a javascript readonly property that will return to you the original width and or height of an image loaded in the browser display.

Say for example you have an image that is 200px by 200px, and you style the image in CSS to be 100px by 100px. If you use jQuery’s width()  or height() method, the return will be the current height or width. IE. 100px by 100px.

This makes perfect sense but…

What if you wanted to have said image be the “thumbnail” of the original sized image. And further, you didn’t want to cut multiple sized images, or run a script to load the “full-size” image, or fake-out the browser by loading the original image off screen and storing the values. You just needed that size to do calculations for positioning, what would you do?

Step in this.naturalHeight and this.naturalWidth, it was right there the whole time, native and ready for use.

How To Use It.

Simply enough you just call the naturalHeight or naturalWidth property in VanillaJS.

var myImg = document.getElementById("theImage");
console.log(myImg.naturalWidth);
console.log(myImg.naturalHeight);

 

Or you could store the values for further use on load like this.

myImg.addEventListener('load', function() {
	console.log('My width is: ', this.naturalWidth);
	console.log('My height is: ', this.naturalHeight);
});

 

Or in jQuery, which is where I used it with a click event.
Click the image, open a Foundation Modal box, calculate the original size of the image and scale it down if it was too large for the size of the screen in proper aspect ratio (This is so I never have to calculate height). And then finally adjust the margin top and left to center the modal box, which is now sized to fit the image, thanks to naturalWidth and naturalHeight.

//Reveal Foundation modal on pic click and adjust it to fit the
//width and height of pic in proper aspect ratio centered on screen

$(".photo img").click(function() {
   var width = this.naturalWidth;
   var height = this.naturalHeight;
   var aspectratio = width / height;
   
   //incase the image is too big for the screen, make is smaller
   //in proper aspect ratio
   var screenWidth = $(window).width() - 350 //just a little pad;
   var screenHeight = $(window).height() - 350 //just a little pad;
 
   if (width > screenWidth) { 
      width = screenWidth;
      height = width / aspectratio;
   }
   
   if (height > screenHeight) { 
      width = screenHeight * aspectratio;
      height = width / aspectratio;
   }
   
   //#photo-modal is position absolute top:50%; left:50%;
   $("#photo-modal").css({
      "margin-top":"-"+(height / 2),
      "margin-left":"-"+(width / 2),
      "width":width,
      "height":"auto"
   });

  //finally, pop the image in the modal
  $("#photo-modal").find(".photo-holder").html(
    "<img src='"+$(this).attr("src")+"'>"
  );
});

Always learning something.

Advertisements

One thought on “Natural Width and Height of Images

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s