Proportional Image Resizing within a Constrained Area

History
The IMGSZ code presented in my earlier article, Determining Image Properties in ASP, was written in response to my need to be able to fit images proportionally within a given area. My client had asked me to develop a photo gallery application for their site, and the photo gallery was to display photos surrounded by a complex graphical 'photo album' motif. As a result, all photos (regardless of their original size) needed to 'fit' within a defined pixelspace. (For information on creating a simple photo gallery, be sure to check out: Creating a Picture Gallery using the Content Linking Component!)

Many questions ensued: So how would I accomplish that within HTML? Would I need to buy a component? And is 'pixelspace' even a real word? Although I mentioned the possibility of enhancing the IMGSZ routines to allow for proportional resize, I left it up to the readers of that original article to enhance those routines to do the propertional sizing. However, so many of you have asked for the resizing routine that I am pleased (relieved?) to offer it here now.

Why Do I Need It?
If you are just learning HTML (or any of its younger variants) you already know that the IMG tag has HEIGHT and WIDTH properties that can be used to force an image to a particular size. However, it has no easy way to do a proportional resize that fits in a desired area. For example, let's say you're showing images in a table for an on-line product catalog. To make things look nice, you're defining the size of the image presented to 100x75 pixels. So you may decide to use WIDTH="100" HEIGHT="75" in your IMG tag for each picture. What will happen is that images may get squashed or stretched in ways that you (and your customers) do not find pleasing. This IMGSZ add-on function will allow you to overcome that problem.

How Does It Work?
The ImageResize function is passed an image filename, a maximum width and a maximum height. The function returns either a HEIGHT=xxx or a WIDTH=xxx string that you embed in your IMG tag to provide the proportional resize.

So How Do I Use It?
Using the function can be as simple as embedding a function call in your IMG tag. For example, the following code will present an image proportionally in a 100x75 pixel area:

response.write "<img src=""graphic.gif"" " & ImageResize(strImageName, 100, 75) & ">"

The parameters passed to the function are as follows:

ImageResize Parameters
Property	Description
strImageName	The actual filename (on the server's drives) of the image you will display
intDesiredWidth	The width constraint
intDesiredHeight	The height constraint

As a further example, let's look at some simple test code. This code will look at your server's C:\ drive, root directory, and display all GIF images that it finds there in a table. The images will be proportionally resized to fit within a 75x45 pixel area. Be sure to view the live demo!

<% '::::::::::::::::::::::::::::::::::::::::::::::::::::::::: '::: ::: '::: SCRIPT: testpropresize.asp ::: '::: AUTHOR: shaffer ::: '::: DATE: 11-Jan-01 ::: '::: PURPOSE: Test/show the operation of the resize ::: '::: (proportional) function ::: '::: ::: '::::::::::::::::::::::::::::::::::::::::::::::::::::::::: %> <!--#INCLUDE FILE='imgsz.asp'--> <!--#INCLUDE FILE='propresize.asp'--> <% ' To test, we'll just try to show all files with a .GIF ' extension in the root of C: by fitting them to a common ' area (75 pixels x 45 pixels) dim objFSO, objF, objFC dim f1, w, h, c, strType Set objFSO = CreateObject("Scripting.FileSystemObject") Set objF = objFSO.GetFolder("c:\") Set objFC = objF.Files response.write "<table border=""1"" cellpadding=""5"">" For Each f1 in objFC if instr(ucase(f1.Name), ".GIF") then response.write "<tr><td>" & f1.name & "</td><td>" & _ f1.DateCreated & "</td><td>" & f1.Size & "</td><td>" if gfxSpex(f1.Path, w, h, c, strType) = true then response.write w & " x " & h & " " & c & " colors</td>" response.write "<td><img src=""" & f1.Path & """ " & _ ImageResize(f1.Path, 75, 45) & " border=""1""></td>" else response.write " </td><td align=""center"">bad image</td>" end if response.write "</tr>" end if Next response.write "</table>" set objFC = nothing set objF = nothing set objFSO = nothing %>

[View the live demo!]

Enough Yakking, Show Me The Code!
The code for the function (below) is quite simple, really. Here is a description of the steps it follows to do its magic:

1.) First, call the gfxSpex function (contained in IMGSZ.ASP) to determine the height and width (and color depth and validity!) of the image.
2.) Determine the target image ratio and the file's image ratio (width divided by depth)
3.) If the file's image ratio is greater-than the target image ratio, then we know that we have to size proportionally based on WIDTH, otherwise we size proportionally based on HEIGHT (and if it was not a valid image, return an empty resize string)

Oops! I'm yakking again, here's the code, already!

function ImageResize(strImageName, intDesiredWidth, intDesiredHeight) dim TargetRatio dim CurrentRatio dim strResize dim w, h, c, strType if gfxSpex(strImageName, w, h, c, strType) = true then TargetRatio = intDesiredWidth / intDesiredHeight CurrentRatio = w / h if CurrentRatio > TargetRatio then ' We'll scale height strResize = "width=""" & intDesiredWidth & """" else ' We'll scale width strResize = "height=""" & intDesiredHeight & """" end if else strResize = "" end if ImageResize = strResize end Function

[Download the code]

Caveats
You can integrate the PROPRESIZE.ASP contents into the IMGSZ.ASP code if you like. Note that this does NOT perform an actual resize of the graphical image file, only the visual representation of the image. What this means is that if you have an image that is 800x600x24 bits which is 1 megabyte in size, and you ask the routine to scale the image to a 100x75 pixel area, you will STILL be downloading that entire 1 megabyte of picture information from the server. If you want to do TRUE thumbnail file creation (on disk) you will need to obtain any one of the graphical components available today that offer this feature.

Happy Programming!