SitePoint Sponsor |
|
User Tag List
Results 1 to 5 of 5
Thread: Dynamically Resize an Image
-
Jan 17, 2003, 18:47 #1
- 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
-
Jan 17, 2003, 20:03 #2
- 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."
-
Jan 17, 2003, 20:37 #3
- 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?
-
Jan 17, 2003, 22:43 #4
- 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
-
Jan 17, 2003, 22:51 #5
- 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>
Bookmarks