使用 JavaScript 调整图像宽度

Question

我正在尝试在弹出窗口中重新调整图像大小。 原始图像是 6000 x 4000。我检查图像是否大于 500，如果是，我只是尝试将图像设置为 500。尝试使用“this”设置它，使弹出窗口以选项卡，图像仍然是其原始大小。 如果我尝试不使用“this”设置图像，则弹出窗口将按预期工作，关于它在屏幕上的位置和框的大小，但图像仍然是其原始大小--6000 x 4000。（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>

Answer 1

用

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

代替

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