Proportional Image Resizing within a Constrained AreaBy Mike Shaffer
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
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
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?
ImageResize function is passed an image filename, a maximum width and a
maximum height. The function returns either a
HEIGHT=xxx or a
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
For example, the following code will present an image proportionally in a 100x75 pixel area:
The parameters passed to the function are as follows:
|The actual filename (on the server's drives) of the image you will display|
|The width constraint|
|The height constraint|
As a further example, let's look at some simple test code. This code will look at your
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!
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
gfxSpexfunction (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!
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.
propresize.aspin text format
imgsz.aspin text format