Code and call Method for proportional scaling of webpage images using JavaScript _ javascript tips-js tutorial

To ensure the uniform size of the image, setting the image size directly causes the image to stretch and blur the image. Then, we will introduce the code to automatically adjust the image size proportionally after the image is loaded, if you are interested, you can refer to the following: when processing web images, especially in some image list applications, it is difficult to ensure the uniform size of images. Setting the image size directly will lead to image stretching, the code described in this article can automatically adjust the image size proportionally after the image is loaded.
Javascript:

The Code is as follows:

<Script language = "javascript" type = "text/javascript">
<! --
// Description: proportional scaling of webpage images using JavaScript
// Finishing: http://www.CodeBit.cn
Function DrawImage (ImgD, FitWidth, FitHeight)
{
Var image = new Image ();
Image. src = ImgD. src;
If (image. width> 0 & image. height> 0)
{
If (image. width/image. height> = FitWidth/FitHeight)
{
If (image. width> FitWidth)
{
ImgD. width = FitWidth;
ImgD. height = (image. height * FitWidth)/image. width;
}
Else
{
ImgD. width = image. width;
ImgD. height = image. height;
}
}
Else
{
If (image. height> FitHeight)
{
ImgD. height = FitHeight;
ImgD. width = (image. width * FitHeight)/image. height;
}
Else
{
ImgD. width = image. width;
ImgD. height = image. height;
}
}
}
}
// -->
<Script>

Call method:
Code:

The Code is as follows:

If the image size is large, we recommend that you set the expected image size in the Image Tag. This will not cause the page to be opened during loading, and this size will not affect the final scaling effect. You can modify the above Code:
Code:

The Code is as follows: