| The code is as follows |
Copy Code |
| Set Picture Auto Adjust function Setimgsize (pimg,iw,ih) {//pimg object, IW thumbnail width, ih thumbnail height var img = new Image (); IMG.SRC = PIMG.SRC; var w = IW; var h = ih;
if (img.width>0 && img.height>0) { if (img.width>iw| | IMG.HEIGHT>IH) { if ((Iw/ih) > (img.width/img.height) { h = IH; w = img.width * (ih/img.height); } Else { W = IW; H = img.height * (iw/img.width); } } Else { W = img.width; h = img.height; } }
Pimg.width=w; Pimg.height=h; Pimg.style.display= ""; } |
The call is fairly simple
| The code is as follows |
Copy Code |
"onload=" setimgsize (this,150,110) "/>
|
Direct calls can be
CSS Code
| The code is as follows |
Copy Code |
. thumbimg {max-width:530px; max-height:530px;} * For Firefox & IE7 * * * HTML. thumbimg {width:expression (this.width > 530 && this.width > this.height?) "530px": Auto); Height:expression (this.height >530?) "530px": Auto); /* for IE6 |
Method Two
| The code is as follows |
Copy Code |
IMG { Width:expression (this.offsetwidth>160 160:true); /* Self-Modify picture width * * Height:expression (this.offsetheight>180 180:true); /* Self-Modify picture Height * * } |
JS the entire page is automatically proportional scaling
| The code is as follows |
Copy Code |
| <script language= "javascript" type= "Text/javascript" > function DrawImage () { var fitwidth = 200,fitheight = 200; var imgd = document.getElementById (' Image1 '); var image = new Image (); IMAGE.SRC=IMGD.SRC; if (image.width>0 && image.height>0) { if (image.width/image.height>= fitwidth/fitheight) { if (image.width>fitwidth) { Imgd.width=fitwidth; imgd.height= (image.height*fitwidth)/image.width; } Else { Imgd.width=image.width; Imgd.height=image.height; } } Else { if (image.height>fitheight) { Imgd.height=fitheight; Imgd.width= (image.width*fitheight)/image.height; } Else { Imgd.width=image.width; Imgd.height=image.height; } } } }
DrawImage (); </script> |