图片不能放大缩小的问题

2019独角兽企业重金招聘Python工程师标准>>>

今天在写一个通过js控制图片的宽度和高度的demo，出现了一个与我逾期不一样的问题
一直以来，由于我们在页面中显示的图片一般不和给的图片尺寸相吻合，所以我们在页面中一般要对img标签定义一个宽高，如下面代码：
html代码：
      <div id = "main">
             <img src="dog.jpg" id="dog"/>
             <button id="bigger" class="button">放大</button>
             <button id="smaller" class="button">缩小</button>
       </div>

       css代码：
        *{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;}

           然后我写了如下的js代码：

                 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;
                 //定义变大函数
                 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('图片已经到达最大值了');
                                 clearInterval(timer);
                             }
                    }else{
                        clearInterval(timer);
                    }
                 
                 },20);
              }
              //缩小函数
              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("已经到达最小值了");
                              clearInterval(timer);
                          }
                     }else{
                         clearInterval(timer);
                     }
                   },20);
              }

            };
            就是想通过点击放大和缩小按钮来控制图片的大小，然而，奇怪的是点击了按钮之后根本不改变，而且检查了好久js代码也没有发现错误，真是诡异，总是以为js代码出错了。最后在看审查元素中的html代码的时候，发现html中嵌入了width=105 height=105的字样，这说明js代码的确是没有错的。然后尝试去掉了img的宽高限制，也就是style中对img标签的限制。终于可以实现了。

            最后总结了一下原因：在style中对img设置了宽高的限制之后，就相当于将img外层定义了一个具有overflow：hidden的容器，也就是将图片进行切割了，那样的话，图片根本不可能正常显示真实的宽高了。soga，原来小知识点还带这么坑人的。

转载于:https://my.oschina.net/sunshinewyf/blog/495271