JS and automatic scaling pictures. Summary of multi-browser compatibility methods for automatically reducing pictures. Original

Recently, I made an automatic reduction effect of an image and found that the js I have been using actually cannot be normal under firefox, which caused the page to be deformed. So I wrote a code with general compatibility, so everyone can discuss it.
It turns out that I used it from pjblog

Copy the codeThe code is as follows:

//Find pictures with too wide width in the web page for zooming and PNG correction
 function ReImgSize(){ 
  for (i=0;i<;i++) 
   { 
   if (){ 
    if ([i].width>550) 
     { 
[i].width="550" //Not high, it will obviously deform the picture
       try{ 
[i].outerHTML='<a href="'+[i].src+'" target="_blank" title="Open picture in new window">'+[i].outerHTML+'</a>'
           }catch(e){} 
       } 
   } 
  else{ 
    if ([i].width>400) { 
//There is no width or height, which makes the picture under firefox even more expand the picture.
[i].title="Open picture in new window"
      [i].="pointer" 
      [i].onclick=function(e){()} 
    } 
  } 
  } 
 }

The very useful code is not enough, the large image under firefox will deform, and the image in the area cannot be controlled. If the large image you want will also be turned into small images.
I wrote it myself,

Copy the codeThe code is as follows:

function $(objectId) {  
     if( && (objectId)) {  
    // W3C DOM  
       return (objectId);  
     }   
     else if ( && (objectId)) {  
    // MSIE 4 DOM  
       return (objectId);  
     }   
     else if ( && [objectId]) {  
    // NN 4 DOM.. note: this won't find nested layers  
       return [objectId];  
     }   
     else {  
       return false;  
    }  
}
function dxy_ReImgSize(){ 
var box=$("dxy_content"); 
var imgall=("img") 
  for (i=0;i<;i++) 
   { 
    if (imgall[i].width>500) 
     { 
    var oWidth=imgall[i].width; 
    var oHeight=imgall[i].height; 
    imgall[i].width="500"; 
    imgall[i].height=oHeight*500/oWidth; 
       } 
    } 
}

But I also found that if the low browser does not support getElementsByTagName, it will be useless. The advantage is that it can control the area.
In the end, there is no way, so I will get a temporary solution

Copy the codeThe code is as follows:

function ReImgSize(){ 
  for (i=0;i<;i++) 
   { 
   if (){ 
    if ([i].width>500) 
     { 
       var oWidth=[i].width; 
       var oHeight=[i].height; 
       [i].width="500"; 
       [i].height=oHeight*500/oWidth; 
[i].outerHTML='<a href="'+[i].src+'" target="_blank" title="Open picture in new window">'+[i].outerHTML+'</a>'
       } 
   } 
  else{ 
    if ([i].width>500) { 
       var oWidth=[i].width; 
       var oHeight=[i].height; 
       [i].width="500"; 
       [i].height=oHeight*500/oWidth; 
[i].title="Open picture in new window";
      [i].="pointer" 
      [i].onclick=function(e){()} 
    } 
  } 
  } 
 }

Note that I've added

Copy the codeThe code is as follows:

var oWidth=[i].width;  
       var oHeight=[i].height;  
       [i].width="500";  
       [i].height=oHeight*500/oWidth; 

If you find any better method, post it
I'm original, please indicate the source when reprinting