Dynamically Resize an Image

**aspen** · Jan 17, 2003, 18:47

So you have an image that needs to fit within a certain spot (say 100px by 100px), but you can't change the image in advance because it is user submitted. So, if an image is larger than 100px by 100px you need to shrink it's largest measurement to equal 100px and you need to keep the same proportions as it had previously.

I know you can do this with Javascript, I'm sure I could write such a script myself in a couple of hours, but I'd rather not have to. This seems like a fairly common need so I was wondering if anyone knows of a free script that can do this?

**compwizard** · Jan 17, 2003, 20:03

Do you need it change after the page is loaded, or do you just need a function to determine the dimensions before the page loads.

**platinum** · Jan 17, 2003, 20:37

Yeah, I had to do something similar once, I just used php and getImageSize() (works for remotely hosted images too).

Or did you want to use javascript in particular?

**aspen** · Jan 17, 2003, 22:43

Well none of the images are on my server so I didn't even think to use anything server side, but come to think of it it doesn't matter so I'll probably do that instead, it'll be easier afterall.

**jofa** · Jan 17, 2003, 22:51

Like this?

Code:

<html>
  <head>
    <script language="javascript">
      function resizeImages()
      {
        var imgs = document.getElementsByTagName("img");
        for(var i = 0; i < imgs.length; i++)
        {
          with(imgs[i])
          {
            if(width > height)
            {
              style.width = "100px";
              style.height = "auto";
            }
            else
            {
              style.width = "auto";
              style.height = "100px";
            }
          }
        }
      }
    </script>
  </head>
  <body onload="resizeImages()">
    <img id="img1" src="aaa.gif"><br>
    <img id="img2" src="bbb.gif"><br>
    <img id="img3" src="ccc.gif">
  </body>
</html>

Or do you want to change the sizes permanently?

The SitePoint Forums have moved.

User Tag List

Thread: Dynamically Resize an Image

Thread Tools

Display

Dynamically Resize an Image

Bookmarks

Bookmarks

Posting Permissions