Image automatic scaling and cropping processing based on jquery implementation

  page after loading, automatic scaling and cropping of scaled pictures, compatible images are cached or not cached, based on jquery

Actually very early wanted to write a such effect, as for the reason? Come in this note, I believe you understand. General portal site, the lack of a large number of picture display, and in order to the beautiful site, the picture has a variety of different sizes, professional website editors, will be processed into the picture and so the proportion of pictures and upload, the site is very good-looking, unfortunately, I would like to say, I met 90% of the site editors are not professional. In order not to let the site editors destroy my efforts, I decided to do such a thing.   1, first of all, in the CSS in the picture definition good size, if JS does not perform, you can see the picture stretching, that is, the most normal performance; 2, for each definition of the size of the picture CSS more than a common container, I chose the italic label <cite></ Cite&gt, and define its CSS to be exactly the same as the same root img css, and define the IMG CSS style of the container to return to margin:0;padding:0; I do this:     code is as follows:/* public * * Cite{display:block;overflow:hidden;overflow:hidden!important}  /* a container/* Bigpic img{display:block;padding:2px;width:240px;height:160px;border:1px solid #cccccc;} #BigPic Cite{display:block ;p adding:2px;width:240px;height:160px;border:1px solid #cccccc;} #BigPic cite img{display:block;margin:0px;padding:0px;border:none}     3, define picture processing function, reference picture defined size and original size, Fill the position under the premise of keeping the proportion, then put into the cutting container; My Code:   Code is as follows://Picture size judgment and processing, surrounded by a clipping container-by the cool function Cutimgz (obj) {    var image=new Image ();     IMAGE.SRC=OBJ.SRC;       $this =$ (obj);     var iwidth= $this. Width ();//get fixed in CSSPicture Display width     var iheight= $this. Height ()//Get fixed picture in CSS display height     if (1*image.width*iheight!=1*iwidth* Image.height) {       //original picture size is not consistent with the fixed picture size in CSS, then process         if (image.width/ Image.height>=iwidth/iheight) {            $this. Height (iheight+ ' px ');     & nbsp       $this. Width ((image.width*iheight)/image.height+ ' px ');                 else{            $this. Width (iwid th+ ' px ');             $this. Height ((image.height*iwidth)/image.width+ ' px ');        }          //with cite, make clipping effect         $this. Wrap ( ' <cite/> ');    }     4, when loading the page to traverse all the pictures, to determine whether it is in the cache, in the cache is directly processed, not in the cache is triggered by the onload processing; Before defining the OnLoad event, the load is already good, causing the OnLoad event not to be triggered, and not the cached picture, if directly processed, the picture does not load out, the original size is considered by the image object Shintou, Width and heighT are all 0) My code:     Code is as follows: $ (' img '). each (function () {    var image=new image ();     Image.src=this . src;     if (image.complete) {       //existing cache, immediate processing         CUTIMGZ (this); &nbs P  } else{       //no cache, onload processing         this.onload=function () {  &N Bsp         CUTIMGZ (this);        }    });