Picture does not enlarge the problem of Zoom out

Today, I'm writing a demo that controls the width and height of the image via JS, and there's a problem with my overdue
All along, since the picture we display on the page is not generally consistent with the size of the image given, we typically define a wide height for the IMG tag on the page, such as the following code:
HTML code:
<div id = "main" >

<button id= "Bigger" class= "button" > Zoom in </button>
<button id= "Smaller" class= "button" > Zoom out </button>
</div>

CSS code:
*{margin:0;padding:0;}
#main {width:900px;margin:0 auto;height:900px;margin-top:100px;}
Img{margin:0 auto;width:100px;height:100px;}
. Button{width:70px;height:40px;line-height:40px;text-align:center;background:purple;color: #fff; border:none; border-radius:4px;margin-top:20px;margin-left:200px;position:absolute;top:0;right:80px;}
#bigger {top:50px;}

Then I wrote the following JS code:

Window.onload = function () {
var img = document.getElementById (' dog ');
var big = document.getElementById (' bigger ');
var small = document.getElementById (' smaller ');
Big.onclick = function () {
IsBig ();
};
Small.onclick = function () {
Issmall ();
};
var maxw = img.width*3;
var maxh = img.height*3;
var minw = img.width*0.3;
var MinH = img.height*0.3;
Define a variable size function
function IsBig () {
var everyw = img.width*1.3;
var everyh = img.height*1.3;
var timer = setinterval (function () {
if (Img.width < Everyw) {
if (Img.width < MAXW) {
Img.width = img.width*1.05;
Img.height = img.height*1.05;
}else{
Alert (' The picture has reached its maximum value ');
Clearinterval (timer);
}
}else{
Clearinterval (timer);
}

},20);
}
Shrink function
function Issmall () {
var everyw = img.width*0.7;
var everyh = img.height*0.7;
var timer = setinterval (function () {
if (Img.width > Everyw) {
if (Img.width > MinH) {
Img.width = img.width*0.95;
Img.height = img.height*0.95;
}else{
Alert ("Minimum value has been reached");
Clearinterval (timer);
}
}else{
Clearinterval (timer);
}
},20);
}

};
Just want to click the zoom in and Zoom Out button to control the size of the picture, however, it is strange to click on the button does not change at all, and check for a long time JS code did not find errors, it is strange, always thought JS code error. Finally, when looking at the HTML code in the review element, I found that the HTML embedded in the width=105 height=105, which means that the JS code is indeed not wrong. Then try to remove the IMG's width-height limit, which is the limit of the IMG tag in the style. Finally, it can be achieved.

Finally summed up the reason: in the style of the IMG set a wide height limit, it is equivalent to the IMG outer layer defined a container with Overflow:hidden, that is, the picture is cut, so that the picture is not normal to display the true width of the height. Soga, the original small knowledge point also with so deceptive.

Picture does not enlarge the problem of Zoom out