When processing webpage images, especially in some image list applications, it is difficult to ensure the uniform size of images. Setting the image size directly causes the image to be stretched and blurred, the code described in this article can automatically adjust the image size proportionally after the image is loaded.
Javascript:
Copy codeThe 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:Copy codeThe 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:Copy codeThe Code is as follows:
