等比例缩放图片

js代码：

view source
print?

01
<script language=""javascript"" type=""text/javascript"">

02
<!--

03
// 说明：用 JavaScript 实现网页图片等比例缩放

04
// 整理：http://www.CodeBit.cn

05
function DrawImage(ImgD,FitWidth,FitHeight)

06
{

07
var image=new Image();

08
image.src=ImgD.src;

09
if(image.width>0 && image.height>0)

10
{

11
if(image.width/image.height>= FitWidth/FitHeight)

12
{

13
if(image.width>FitWidth)

14
{

15
ImgD.width=FitWidth;

16
ImgD.height=(image.height*FitWidth)/image.width;

17
}

18
else

19
{

20
ImgD.width=image.width;

21
ImgD.height=image.height;

22
}

23
}

24
else

25
{

26
if(image.height>FitHeight)

27
{

28
ImgD.height=FitHeight;

29
ImgD.width=(image.width*FitHeight)/image.height;

30
}

31
else

32
{

33
ImgD.width=image.width;

34
ImgD.height=image.height;

35
}

36
}

37
}

38
}

39
//-->

40
</script>

调用方式：

1
<img src=""1148202890.jpg"" alt=""自动缩放后的效果"" onload=""javascript:DrawImage(this,200,200);"" />

如果图片较大，建议在图片标签里面同时设置期望的图片大小，这样不会导致页面在加载中撑开，该大小不会影响最终缩放效果。可以修改上面的代码为：

1
<img src=""1148202890.jpg"" alt=""自动缩放后的效果"" width=""200"" height=""200""onload=""javascript:DrawImage(this,200,200);"" />