Okay, so at some point as a web designer you're going to come across a project where you have to design some kind of gallery with image thumbnails. 

In an ideal world (e.g., Photoshop), all of the thumbnails will be precisely the same size, so plugging them into nice little skins (the "pretty" that you put around them) is cake.  Unfortunately, the real world ain't like that.  In the real world, you have hundreds of thumbnails to deal with, none of which will probably ever be exactly the same size.

Now, of course, the thumbnail skins still have to work.  So what should you do?

The first thing to NOT do is hard-code the "width" and "height" attributes of the <img> tag.  Super bad idea.  Okay, not a TERRIBLE idea, but it will inevitably lead to some funny looking thumbnails as the img tag will stretch or shrink your image to fit these values.

So what's the alternative?  Well, ideally, you'd be using Coldfusion 8 and could use the super-cool built-in image manipulation tools to properly scale and crop every image to be the same size.  Ah, but we're not in an ideal world!

The second alterative I've found that works to a limited More >