If you are dealing with Web design or any such development work you might have faced the problem of resizing images to fit the current viewable area on any web page , Now you can do it in only two possible ways.
2. Client side resizing – JavaScript and CSS
Benefits of Server side resizing are easily visible as whole of the images need not be downloaded to users browser ( this stands true for Very large and HQ images) , but this requires coding and storing the resized version on your server
While client side is good if the image size is not large, ie.around 100-200 KB
for PHP resizing you can use the simplest possible resizing script known as TimThumb ( there are several others but this one is very stable and handles PNG/GIF and transparency issues well) but this also needs a writeable cache folder on your server where all image resizes are stored , resizing is simple with this just call this script with given dimensions and it does the rest
<img src="/scripts/timthumb.php?src=/images/whatever.jpg&h=150&w=150&zc=1" alt="" />
Now another method that can be used is based on Javascript and it can be found here ( although people have commented on it’s durability as if you use the browser back button it fails to resize)
and the last method is based on CSS and believe me this is the easiest one to work with if you know what is your maximum width and height and it preserves the aspect ratio too ,like the earlier two methods.
So if you wish to have a maximum height and width of 500px,300px respectively then just add this to your style.css file
.resize {
width: 300px;
height : auto;
}.resize {
width: auto;
height : 500px;
}
and in your image just add this class as
<img src=”http://www.myblog.com/myimage.jpg” class=”resize” alt=” my image” />
I have tried the PHP method and this CSS one too, and I loved this CSS method as it is very easy to add and I had images ranging from 100-200 KB so this CSS method worked out best, What suits you is your own thinking and requirement .
Hope it helped ..
Last 5 posts in Tips and Tricks
- How to Check the Already Running Process in Socket Spy Debugging Environment. ? - February 8th, 2010
- How-To: Remotely Wipe an iPhone Using MS Exchange Server - February 5th, 2010
- Free WinRar 3.80 Registration Key - February 5th, 2010
- How to Add Password Protection to Folder and Lock it - January 22nd, 2010
- Best Linux Distro for a Old and Slow PC – Small Low on Resources and ultra fast - October 22nd, 2009


March 5th, 2009 at 7:48 pm
It sounds like you are gathering lots of different ideas in your blog. This is great stuff.