Can you thumbnail the "src" attribute of an "img" tag?

[unitedlocalbands]

I use a lot of coldfusion, html and css.

My webite is www.unitedlocalbands.com

It's a networking site to bring together local talents. Then users can add pics and video by copy and paste. I store the full url ("http://www.www.www") of the image in an access database. Then I use coldfusion to query the database and display all the logos, pics, video using:

<img width="110" height="125" src="http://www.www.www">

The problem is by specifying the width and height, most of the images look distorted. I would like to know if there is a way to thumbnail the "src" atribute of the "img" tag so that the image doesnt distort. The purpose of the thumbnail is so that when viewers are looking thru www.unitedlocalbands.com they can see ever bands, studios, ect... logo together. Then if they so wish, the viewer can click on that logo and it will take them to that bands profile page.

[Twey]

I don't know. This is really a ColdFusion question, since it should be done server-side. I don't think any of the regulars here know ColdFusion, so you might be better off trying somewhere else.

[unitedlocalbands]

Really all coldfusion is doing is supplying the url for the image I want displayed.
Then the <img> tag is actualy displying the image on the page.

The "img" tag is what distorts the image.

I guess I'm asking is there a way for the img tag to display a smaller proportioned version of the image. As if it were a thumbnail.

example:

http://www.unitedlocalbands.com/example.cfm

If you "view source" you can see all i did was add a width and height atribute.

So is there a way to use "DHTML" or "JAVASCRIPT" to make smaller proportioned version of these images?

[Medyman]

Why not just use some CSS?

<img src="" style='width:50&#37;'>

[djr33]

Then just specify the width. The height will be related to that.

Originally 600x400px will become 100x67, or 150x30 = 100x20, etc.

The one downside is if the height is much larger than the width, so you might have 500x1000px, then you'd end up with 100x200px.


However, the better idea with this is to actually generate a smaller image on the server, as Twey said. This will save loading time and bandwidth.
It will also avoid odd scaling issues.

You could probably use javascript to control more specifically the height/width, but that seems like more work than you need to bother with.

Hmm... I wonder if CSS could solve this...
<img style="max-width:100px;max-height=100px;">

[unitedlocalbands]

CSS does work although, it really distorts the columns on the table tag.

Every image in the column takes the width of the widest image.

Thank you for you help. I apreciated it. I think I'm going to have to find a cold fusion forum and see how it can be done on the server side like you all are saying.

the page Im working on is:

http://www.unitedlocalbands.com/user_login/user_band_logo.cfm?&showAll=Yes&orderby=groupname

[unitedlocalbands]

Thanks again to everyone for your help and guidance.

Specifying just the width seems to work and create the effect I'm looking for.

Take care,

James

[Twey]

Really all coldfusion is doing is supplying the url for the image I want displayed. I know that, but ColdFusion should be used to fetch the image dimensions and generate an appropriate scale based on them.

[unitedlocalbands]

Thanks Twey,

take care,