Displaying a List of Scaled Images, Part 2By Scott Mitchell
In Part 1 we looked at how to display the images in a directory
on a Web page. However, if the images are a variety of sizes, with some being too large, the resulting
formatting is anything but eye-pleasing. In this final part, we'll examine how to dynamically resize the
images using the .NET Framework's
(Note that we won't be resizing the actual image file,
but specifying the
width attributes accordingly.
To see how to actually resize an image, be sure to read the article: True Image Resizing.)
Determining an Image's Width and Height
What we want to be able to do is specify some maximum height and width constraints, and require that all images fit within those constraints. Since in our previous live demo we displayed a DataList with three columns, perhaps we'd want to limit the resulting HTML table to 600 pixels, meaning each image should be no more than 200 pixels in width. Also, let's assume that we don't want any image greater than 200 pixels in height.
Now, we need to be able to determine if one the image's we're about to display has a height or width
greater than the allowed amount (200 pixels). If it does, then we need to scale the image's height
and width so that it fits within the constraints. To determine an image's height and width, we can use
Image class. The following code creates a new instance of the
from the specified file:
Once we have an instance of the
Image class we can determine the height and width of the
image by checking the
Width properties. The following code
iterates through all of the GIF files in the
IMAGE_DIRECTORY directory and dynamically
determines the property height and width for the image.
The above code works in the following manner: each image's height and width is checked to see if either exceeds the maximum constraints. If neither do, then the image is shown at its actual size. If either of them do, though, the delta between the image's actual height and width and the maximum allowed height and width is computed. The largest delta is then used to determine how the scaling factor is computed.
So, if an image has a height of 300 and a width of 500, and the maximum height and width is 200, then the width delta is 300 (500 - 200) and the height delta is 100 (300 - 200). Since the width delta is larger than the height delta, the scaling factor is the max width divided by the image's width (200 / 500, or 0.4). The image's height and width are then multiplied by this scaling factor to determine the images new scaled height and width. For this particular examples, the image's new height would be 120 and the width would be 200. By multiplying both the height and width by this one scale factor, the image's height to width ratio is preserved.
In this article we examined two things: how to enumerate the files in a directory, and how to dynamically determine an image's height and width attributes. With these two bits of knowledge, this article demonstrated how to create an ASP.NET Web page that would list images from a directory in a three-columned HTML, where the images were guaranteed to be displayed no larger than 200x200 pixels. For more information on working with images in ASP.NET consider reading Saving Dynamically Created Images on the Web Server, which is from a sample chapter from the book ASP.NET: Tips, Tutorials, and Code.
Now that you have finished this article, be sure to read the follow-up article,
True Image Resizing, in which we'll examine how to use the
GetThumbnailImage() method to create an actual thumbnail of
an image on-the-fly!