VUE图片在设置好的DIV里面自动适应宽高，显示全部图片，不够的留空白以及图片随着鼠标放大缩小拖拽

         <div
                id="sf"
                ref="imgCont"
                class="imgCont"
                @mousewheel.prevent="rollImg($event)"
              >
                <div>
                  <img id="img" ref="imgDiv" class="bigImage " v-drag :src="rightImg" alt="" />
                </div>
              </div>  
                  
                  
                  
                  
                  // VUE图片在设置好的DIV里面自动适应宽高，图片显示全部，不够宽高的留空白
                            #sf {
                              float: right;
                              margin-top: 15px;
                              width: 80%;
                              height: 80vh;
               
                              overflow: hidden;
                              .bigImage {
                                max-width: 80%;
                                max-height: 80vh;
                                //拖拽的时候没有这个定位 无法拖拽
                                 position: relative;
                              }
                            }
                            
                            
                            // 图片滚动放大
                    rollImg(event) {
                      console.log("event", event);
                      // this.params.zoomVal += event.wheelDelta / 1500;
                      let img = this.$refs.imgDiv;
                      if (event.wheelDelta > 0 || event.detail < 0) {
                        //向上滚，box1变长
                        img.style.height = img.clientHeight + 10 + "px";
                        console.log(2020, "img");
                      } else {
                        //向下滚，box1变短
                        img.style.height = img.clientHeight - 10 + "px";
                      }

    
                    },
                    directives: {
                        //注册指令
                        drag: function(el) {
                          let dragBox = el; //获取当前元素
                          dragBox.onmousedown = e => {
                            console.log("注册指令", dragBox);
                            e.preventDefault();
                            //算出鼠标相对元素的位置
                            let disX = e.clientX - dragBox.offsetLeft;
                            let disY = e.clientY - dragBox.offsetTop;
                            document.onmousemove = e => {
                              //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                              e.preventDefault();
                              let left = e.clientX - disX;
                              let top = e.clientY - disY;
                              //移动当前元素
                              dragBox.style.left = left + "px";
                              dragBox.style.top = top + "px";
                            };
                            document.onmouseup = e => {
                              e.preventDefault();
                              //鼠标弹起来的时候不再移动
                              document.onmousemove = null;
                              //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
                              document.onmouseup = null;
                            };
                          };
                        }
                      },