网页中控制图片按比例缩放显示

有时候图片超出预想大小,需要将其大小改变,所有图片显示大小一致,可以使用以下方式,新建一个名为test.htm的文件,然后在里面写入以下代码:

[php]
<script language="JavaScript">
<!–//图片按比例缩放
var flag=false;
function DrawImage(ImgD){
var image=new Image();
var iwidth = 220; //定义允许图片宽度
var iheight = 200; //定义允许图片高度
image.src=ImgD.src;
if(image.width>0 && image.height>0) {
flag=true;
if(image.width/image.height>= iwidth/iheight) {
if(image.width>iwidth)
{
ImgD.width=iwidth;
ImgD.height=(image.height*iwidth)/image.width;
}
else {
ImgD.width=image.width;
ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
else {
if(image.height>iheight) {
ImgD.height=iheight;ImgD.width=(image.width*iheight)/image.height;
}
else {
ImgD.width=image.width;ImgD.height=image.height;
}
ImgD.alt=image.width+"×"+image.height;
}
}
}
</script>
<!– 此处是显示缩放后的图片–>
<img src="uploads/test.jpg>" onload="javascript:DrawImage(this);" >
[/php]

Comments are closed.