Implementation principle and js code of proportionally displaying pictures on web pages_javascript skills

On dynamic websites, you often need to upload your own pictures, and the size of these pictures is unknown. When displayed as thumbnails, they must be scaled proportionally to display them beautifully. Take the recent golf website (http://www.changligolfsales.com) as an example.

This website needs to upload golf product images and display them as thumbnails on the list. The site server supports Asp, but does not support thumbnail generation components such as aspjpeg, so the uploaded images are directly displayed as thumbnails. , you need to scale it proportionally. The premise is to get the length and width of the picture. The first method that comes to mind is to read the length and width information of the picture through the ADODB.STREAM object when uploading, save it in the database, and read it when the page is generated. Take it out and calculate the ratio. The obvious disadvantage of this method is that each picture needs to be read and calculated on the server, which consumes more resources and increases the page opening delay.
The second method uses Javascript to transfer the calculation to the client.

The principle is to use Javascript on the client to read the size of each image and scale it after the page is loaded (onload trigger).

Copy code The code is as follows:

//Scale the imageDest image proportionally to fit Displayed in the area of ​​width W and height H
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 aspect ratio
if(image.width/image. height >= W/H)//Relative display frame: width > height
{
if(image.width > W) //The width is greater than the display frame width W, the height should be compressed
{
imageDest.width = W;
imageDest.height = (image.height*W)/image.width;
}
else //The width is less than or equal to the display box width W, and the picture is completely Display
{
imageDest.width = image.width;
imageDest.height = image.height;
}
}
else//Similarly
{
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 on the golf website is set to imgProductItem, such as: , the 150x113 inside is the maximum size of the display box, because the processing function must be run when onload is completed, so a certain size must be set here, otherwise the entire page will be loaded during the image loading process There was a typesetting disorder, and it returned to normal after running RsizeAllImageById.
Add a batch operation function:

Copy code The code is as follows:

// Scale all images with specified ids in the page proportionally
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

Copy the code The code is as follows:

; add in the head area:

will display all images as thumbnails.