JS css image automatic scaling and adaptive size_javascript skills

I added css restrictions:

Copy code The code is as follows:

div img {}{
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; The maximum width is 600px under IE7, FF and other non-IE browsers. But it doesn't work in IE6.
　◎ width:600px; The image size is 600px in all browsers;
◎ When the image size is larger than 600px, it will be automatically reduced to 600px. Valid in IE6.
◎ overflow:hidden; Hide the excess part to avoid stretching and deformation caused by failure to control the image size. < script language="JavaScript">
var imgObj;
for( i = 0; i < document . getElementsByTagName("img") . length; i )

{ imgObj = document . getElementsByTagName("img")[i]; //It is recommended to only judge one of the height or width, so that it can be automatically scaled if ( imgObj . width > 500 ) //Judge the width of the image, if If it is greater than 700, set it to 700. The value can be modified by yourself { imgObj . width = 500 } if ( imgObj . height > 700 ) // Determine the height of the picture, if it is greater than 700 , then set it to 700, the value can be modified by yourself

{
imgObj . height = 700
}
}



Separate picture To control, use this:




Copy the code


The code is as follows:

<script><br> var abc=document.getElementById("abc");<br>var imgs=abc.getElementsByTagName("img");<div class="codetitle">for (var i=0,g;g=imgs[i];i )<span>g.onload=function(){if (this.width>300){this.width=300}else{if (this.height>300)this.height=300}}<a style="CURSOR: pointer" data="2068" class="copybut" id="copybut2068" onclick="doCopy('code2068')"></script>The test passed under IE and FF.