Home >Web Front-end >JS Tutorial >js code for automatically shrinking images to prevent images from breaking the page_javascript skills
JS code (put it anywhere):
Where the image is used:
width="180" style="max-width:90%" Note that it is best to limit it, if not limit it When loading the image, it will be resized to its original size and then reduced. This process will be ugly if the image is too large. Here are the width and height, which were changed in the previous JS, and the corresponding changes are made here.
The image will not be deformed. It will only be scaled down, don’t worry <script> <BR><!-- <BR>var flag=false; <BR>function DrawImage(ImgD){ <BR>var image=new Image(); <BR>image.src=http://www.jb51.net/htmldata/2006-01-08/ImgD.src; <BR>if(image.width>0 && image.height>0){ <BR> flag=true; <BR> if(image.width/image.height>= 180/110){ <BR> if(image.width>180){ <BR> ImgD.width=180; <BR> ImgD.height=(image.height*110)/image.width; <BR> }else{ <BR> ImgD.width=image.width; <BR> ImgD.height=image.height; <BR> } <BR> /*ImgD.alt="js code for automatically shrinking images to prevent images from breaking the page_javascript skills" */ <BR> } <BR> else{ <BR> if(image.height>110){ <BR> ImgD.height=110; <BR> ImgD.width=(image.width*110)/image.height; <BR> }else{ <BR> ImgD.width=image.width; <BR> ImgD.height=image.height; <BR> } <BR> /*ImgD.alt="js code for automatically shrinking images to prevent images from breaking the page_javascript skills" */ <BR> } <BR>} <BR>} <BR>//--> <BR></script>