图片放大，缩小也是前端中经常遇到得问题，以下就根据这个需求，做如下示范：
<!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>
