SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Dynamically Resize an Image

    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?
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  2. #2
    SitePoint Evangelist compwizard's Avatar
    Join Date
    May 2002
    Location
    United States
    Posts
    457
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Compwizard
    "There are 10 kinds of people in this world -- those who know binary, and those who don't."

  3. #3
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  4. #4
    Serial Publisher silver trophy aspen's Avatar
    Join Date
    Aug 1999
    Location
    East Lansing, MI USA
    Posts
    12,937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Chris Beasley - I publish content and ecommerce sites.
    Featured Article: Free Comprehensive SEO Guide
    My Guide to Building a Successful Website
    My Blog|My Webmaster Forums

  5. #5
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •