图片放大，缩小也是前端中经常遇到得问题，以下就根据这个需求，做如下示范：
<!DOCTYPE html>
<html>
<head>
<title>图片放大</title>
</head>
<style type="text/css">
.main_div{
margin: 20px auto;
text-align: center;
}
.pic_div{
position: relative;
background-color: pink;
border: 1px dotted red;
margin: 10px auto;
width: 800px;
height: 600px;
}
img{
width: 600px;
height: 400px;
}
</style>
<script type="text/javascript">
function bigit(){
var image=document.getElementsByClassName("pic")[0];
image.style.height=image.height*1.1+'px';
image.style.width=image.width*1.1+'px';
}
function littleit(){
var image=document.getElementsByClassName("pic")[0];
image.style.height=image.height/1.1+'px';
image.style.width=image.width/1.1+'px';
}
</script>
<body>
<div style="" class="main_div">
<p>图片在一个区域里放大缩小</p>
<button onclick="bigit()">图片放大</button> <button onclick="littleit()">图片缩小</button>
<div class="pic_div">
<img src="bgcc.jpg" class="pic">
</div>
</div>
</body>
</html>
效果展示：
