使用JavaScript重新调整图像宽度

问题描述

我正在尝试在弹出窗口中调整图像大小。原始图像是6000 x4000。我检查图像是否大于500，如果是，则尝试将图像设置为500。尝试使用“ this”进行设置，使弹出窗口标签，图片仍然是原始尺寸。如果我尝试不使用'this'设置图像，则弹出窗口将按照预期的方式在屏幕上放置位置以及盒子的大小，但是图像仍然是原始大小-6000 x4000。（PS ：我也必须使用ES5。）

有什么作用？ 谢谢， CM

 <script language="javascript" type="text/javascript"><!--
    // let i=0;
      function resize() {
          console.log("Testing");
          let i=0;
    
          if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1 && window.navigator.userAgent.indexOf('SV1') != -1) {
              i=30; //This browser is Internet Explorer 6.x on Windows XP SP2
          } else if (window.navigator.userAgent.indexOf('MSIE 6.0') != -1) {
              i=0; //This browser is Internet Explorer 6.x
          } else if (window.navigator.userAgent.indexOf('Firefox') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
              i=25; //This browser is Firefox on Windows
          } else if (window.navigator.userAgent.indexOf('Mozilla') != -1 && window.navigator.userAgent.indexOf("Windows") != -1) {
              i=45; //This browser is Mozilla on Windows
          } else {
              i=80; //This is all other browsers including Mozilla on Linux
          }
    
              var imgWidth = document.images[0].width;
              var imgHeight = document.images[0].height;
              console.log("Original image width is: " + imgWidth);
              console.log("Original image height is: " + imgHeight);
    
              if(imgWidth > 500){
    
                  //Shrink the image to size of popup frame
                  this.imgWidth = 500;
                  this.imgHeight = 500;
                  console.log("Adjusted image width is: " + imgWidth);
                  console.log("Adjusted image height is: " + imgHeight);
    
                  //Get display/screen width and height
                  var screenWidth  = screen.width;
                  var screenHeight = screen.height;
                  console.log("Screen width is: " + screenWidth);
                  console.log("Screen height is: " + screenHeight);
    
                  //Set popup position on display/screen
                  var leftpos =  screenWidth / 2 ;
                  var toppos  =  screenHeight / 2 - imgHeight / 2;
                  console.log("Left position is: " + leftpos);
                  console.log("Top position is: " + toppos);
    
                  //Set popup frame width and height equal to adjusted image width and height
                  var frameWidth  =  imgWidth;
                  var frameHeight =  imgHeight+i;
                  console.log("Frame width is: " + frameWidth);
                  console.log("Frame height is: " + frameHeight);
                  window.moveto(leftpos,toppos);
                  window.resizeto(frameWidth,frameHeight+i);
              }
              else if (document.documentElement && document.documentElement.clientWidth) {
                var imgHeight = document.images[0].height + 40 - i;
                var imgWidth = document.images[0].width + 20;
                var height = screen.height;
                var width = screen.width;
                var leftpos = width / 2 - imgWidth / 2;
                var toppos = height / 2 - imgHeight / 2;
                frameWidth = imgWidth;
                frameHeight = imgHeight + i;
                window.moveto(leftpos,toppos);
                window.resizeto(frameWidth,frameHeight + i);
              } else if (document.body) {
                window.resizeto(document.body.clientWidth,document.body.clientHeight - i);
              }
        self.focus();
      }//end resize() function
    //--></script>

解决方法

使用

var imgWidth = document.images[0].style.width;

代替

var imgWidth = document.images[0].width;