本网页展示了利用javascript技术设置图片的长度和宽度，所设置的宽度和高度只是显示出来的效果，而不是图片真实的宽度和高度就发生了改变。在本例子中，首先显示了图片的真实宽度naturalWidth和高度naturalHeight，然后通过设置图片的 width和height属性来改变图片的宽度和高度。下面，我们郑州网站建设公司整理了javascript实现改变图片的长度和宽度功能，包括增大宽度和高度、减小宽度和高度两个实现方式，可供建站用户和网站建设技术人员参考。
<!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>利用Javascript技术动态设置图片长度和宽度（本实例由郑州网站建设公司--郑州凯讯公司提供）</title>
<script type="text/javascript">
function set_wh(image)
{
//naturalWidth为图片本身真实宽度，naturalHeight为图片本身真实高度
alert("图片本身width=" + image.naturalWidth + "，" + "图片本身height=" + image.naturalHeight);
//图片宽度增加100，高度增加50
image.width = image.naturalWidth + 100;
image.height = image.naturalHeight + 50;
//显示图片增加宽度和高度以后的数值
alert("宽度width=" + image.width + "，" + "高度height=" + image.height);
//图片宽度增加100，高度增加50
image.width = image.width - 150;
image.height = image.height - 100;
//显示图片减小宽度和高度以后的数值
alert("宽度width=" + image.width + "，" + "高度height=" + image.height);
}
</script>
</head>
<body>
<img src="http://www.kxcom.cn/images/logo.jpg" onclick="set_wh(this);" />
</body>
</html>
