您的位置：首页 > Web前端 > JavaScript

利用javascript实现图片等比例缩放

2008-12-10 16:07 786 查看

关键字: 图片等比例缩放, javascript
下面方法可以实现等比例缩放：

1．把Image的Width和Height属性删除。

2.　把下面js代码复制在Image后面（注意：这里假设你的Image名称叫“Image1”如果不同请把它改过来，图片按等比例缩放成200×200）。

Js代码

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

function DrawImage()

{

var FitWidth = 200,FitHeight = 200;

var ImgD = document.getElementById('Image1');

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;

}

}

}

}

DrawImage();

</script>

<script language="javascript" type="text/javascript">
function DrawImage()
{
var FitWidth = 200,FitHeight = 200;
var ImgD = document.getElementById('Image1');
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;
}
}
}
}
DrawImage();
</script>

整个网页的源码如下：

Html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>图片等比例绽放</title>

</head>

<body>

<img src="Spring.jpg" id="Image1"/>

</body>

</html>

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

function DrawImage()

{

var FitWidth = 200,FitHeight = 200;

var ImgD = document.getElementById('Image1');

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;

}

}

}

}

DrawImage();

</script>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航