Tip: Please give your vote in at least one Picks Poll to enable search results. Thank you.
Search for phrase rather than keywords

Resize an image proportionally with Javascript

3rd November 2012

Page: prev. | 1 | next

Recently I made some changed to the sites Gallery.

Previously clicking a sized-down version of an image on a gallery page had directed to the full-sized image resource itself (i.e. pinup.png) but I wished the sized-down version of the painting or sketch to to resize to its full-size on the page when clicked.

Thankfully, resizing an image while keeping its aspect-ratio is easy to accomplish using Javascript.

Repair girl
The repair girls have been busy improving the site's Gallery.

First, lets get the image.

  1. <img id="yourImage" src="yourImage.png" width="452" height="640" />
  2. <!-- The images' actual dimension of 724px x 1,024px are scaled down to 452px x 640px. -->

In this example, as the HTML comment explains, the images' actual dimension are assumed to be 724px x 1,024px and are scaled down to 452px x 640px—the actual dimensions divided by a totally arbitrary factor of 1.6.

For the sake of simplicity we'll use an onclick event to call a function to have the image resize to its actual dimensions when clicked, and make it a toggle by having it resize back to those scaled down values if clicked again.

  1. <script type="text/javascript">
  2. function toggleImageSize(obj) {
  3.   var image = document.getElementById(obj);
  4.   if ( != '724px') {
  5. = '724px';
  6. = 'auto';
  7.   } else {
  8. = '452px';
  9. = 'auto';
  10.   }
  11. }
  12. </script>
  13. <img id="yourImage" onclick="toggleImageSize('yourImage');" src="yourImage.png" width="452" height="640" />
  14. <!-- The images' actual dimension of 724px x 1,024px are scaled down to 452px x 640px. -->

Now when the image is clicked the onclick event calls the toggleImageSize function passing as an argument the id of the elemant (the image) and the image is resized to its full dimensions. When clicked again it is shrunk back to those rescaled dimensions.

The resizing is completed by setting a numeric value followed by px (pixels) for the image's width and the auto value for the its height which ensures it is scaled proportionally, although the width could be set with an absolute value too if you required, perhaps to make resizing non-proportional for some reason.

The onclick need not be attached to the image to be resized; you could, for example, attach it to a zoom icon or similar—ust ensure the id of the image is passed to the function as an argument (this is why I have purposefully not used the this keyword in this example, but you could if you wished as long as the event remains attached to the image iteself). For simplicity's sake an onclick event was used, but you could attach an event listener for more unobtrusive script.

I hope you may find a use for it. Click the image below to test it out.

Page: prev. | 1 | next

Tags: Javascript, resize images, scripting.


Illustrations, paintings, and cartoons featuring caricatured celebrities are intended purely as parody and fantasised depictions often relating to a particular news story, and often parodying said story and the media and pop cultural representation of said celebrity as much as anything else. Who am I really satirising? Read more.

Privacy policy

No cookies, ad and tracker free. Read more.