<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>改变图片大小 方法1</title>
<script>
function showbigger(){
var div=document.getElementById("div");
div.style.width=500+"px";
div.style.height=500+"px";
}
function showsmaller(){
var div=document.getElementById("div");
div.style.width=100+"px";
div.style.height=100+"px"; //注意获取的ID时img的ID
}
</script>
</head>
<body>
<button onclick="showbigger()">放大</button>
<button onclick="showsmaller()">缩小</button>
<div style=" 100px;height: 100px"><img src='img/1.jpg' id="div" ></div>
</body>
</html>
方法2：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>图片放大缩小</title>
</head>
<body>
<p align="center">
<input type="button" value="放大" onclick="blowup()">
<input type="button" value="缩小" onclick="reduce()">
</p>
<table width="300" border="0" align="center">
<tr>
<td>
<div align="center">
<input name="img" type="image" id="img" src="1.jpg" align="middle" border="0">
</div>
</td>
</tr>
</table>
<p>
<script language="JavaScript">
function blowup(){
var height=img.height;
var width=img.width;
if((height<=height*2)||(width<=width*2)){ //可以无限放大
img.height=img.height+20;
img.width=img.width+20;
}
}
function reduce(){
if((img.height>100)||(img.width>100)){ //可以缩小到宽或者高等于100px时的大小
img.height=img.height-20;
img.width=img.width-20;
}
}
</script>
</p>
<div align="center"></div>
<p> </p>
</body>
</html>