How to Implement proportional display of images on web pages and javascript code-javascript tutorial

Because the size of the uploaded image is unknown, it must be scaled proportionally to display the image as a thumbnail. This article will give you a simple introduction to a good method, if you have this requirement, you can refer to the need to upload your own images on dynamic websites. The size of these images is unknown, you must scale the image to display the image as a thumbnail. Take recently made golf website (http://www.changligolfsales.com) as an example.

The website needs to upload golf product images and display them on the list using thumbnails. The website server supports Asp, but does not support generating thumbnail components such as aspjpeg, therefore, if you want to display the uploaded image as a thumbnail, You need to scale it proportionally. To obtain the length and width of the image, you must first use the ADODB method during the upload. the length and width of the STREAM object to read images are stored in the database and read from the page to calculate the proportion. The obvious disadvantage of this method is that each image needs to be read and computed on the server, and the page opening latency is also added when resources are consumed.
The second method uses Javascript to transfer the calculation amount to the client.

The principle is to use Javascript on the client side to read and scale the size of each image after page loading (triggered by onload.

The Code is as follows:

// Scale the size of the imageDest image proportionally. It is suitable for displaying the image in the W and H ranges.
Function ResizeImage (imageDest, W, H)
{
// Display box Width W, height H
Var image = new Image ();
Image. src = imageDest. src;
If (image. width> 0 & image. height> 0)
{
// Compare the aspect ratio
If (image. width/image. height> = W/H) // relative display box: width> height
{
If (image. width> W) // The width is greater than the width of the display box W, and the compression height is required.
{
ImageDest. width = W;
ImageDest. height = (image. height * W)/image. width;
}
Else // The width is less than or equal to W of the display box width, and the image is fully displayed.
{
ImageDest. width = image. width;
ImageDest. height = image. height;
}
}
Else // likewise
{
If (image. height> H)
{
ImageDest. height = H;
ImageDest. width = (image. width * H)/image. height;
}
Else
{
ImageDest. width = image. width;
ImageDest. height = image. height;
}
}
}
}

The above function scales the image.
The id of each thumbnail of the golf website is set to imgProductItem, for example: "name =" imgProductItem "width =" 150 "height =" 113 "border =" 0 "id =" imgProductItem "/>. The 150x113 is the maximum size of the display box, because the processing function must be run when onload is complete, a certain size must be set here. Otherwise, the entire page may not have typographical disorder during image loading, and RsizeAllImageById will resume normal operation.
Add a batch operation function:

The Code is as follows:

// Proportional scaling of all images with specified IDs on the page
Function RsizeAllImageById (id, W, H)
{
Var imgs = document. getElementsByTagName ("img ");
For (var I = 0; I {
If (imgs [I]. id = id)
{
ResizeImage (imgs [I], W, H );
}
}
}

In this way, add

The Code is as follows:

; In the head area, add:

You can display all the images as thumbnails.