javascript - ズームイン - アウトが正しく機能しない

Question

ユーザーがズームイン、ズームアウト、およびデフォルトのサイズに戻ることができるように、3 つのボタンを実装しました。

スクリプトはズームインとズームアウトを行うように機能しますが、まだ解決できない問題が 2 つあります。

最初の問題:

ズームインするたびに、ズームする画像がウィンドウの限界に達します。画像の左右にスペースがない場合、画像が上下に引き伸ばされます。

2 番目の問題: ボタンの onclick ハンドラーをデフォルト サイズに設定できません。

誰かが私にこれを手伝ってくれることを願っています。

フィドル

私のコード:

HTML:

<div id="thediv"> 
  <img id="pic" src="images/2.png"/>
</div>
<input type="button" value ="-" onclick="zoom(0.9)" id="minus"/>
<input type="button" value ="+" onclick="zoom(1.1)" id="plus"/>
<input type="button" value ="1" onclick="zoom(1.1)" id="1" style="margin-left:80px;position:fixed;bottom:0px;"/>

CSS:

#thediv {
    margin:0 auto;
    height:auto;
    width:1005;
    overflow:hidden;
    }

#thediv img {
    position: relative;
    left: 50%;
    top: 50%;
}
#minus{position:fixed;bottom:0px}
#plus{position:fixed;bottom:0px;margin-left:40px;}

Javascript:

window.onload = function(){zoom(1)}

function zoom(zm) {
img=document.getElementById("pic")
wid=img.width
ht=img.height
img.style.width=(wid*zm)+"px"
img.style.height=(ht*zm)+"px"
    img.style.marginLeft = -(img.width/2) + "px";
    img.style.marginTop = -(img.height/2) + "px";
}