基於JQuery實現的圖片自動進行縮放和裁剪處理_jquery

其實很早就想寫一個這樣的效果，至於原因？進來這個筆記，我相信你懂的。
一般入口網站，缺少不了大量的圖片展示，而為了網站美觀，圖片又有各種不同尺寸，專業的網站編輯人員，會把圖片處理成等比例的圖片再上傳，把網站弄得很好看，可惜，我想說，我遇到90%的網站編輯人員都是不專業的。
為了不讓網站編輯人員毀掉我的心血，我決定做這樣一個事情。

1、首先，在CSS裡對圖片定義好大小，如果JS不執行，就能看到拉伸的圖片，也就是最正常的表現；
2、對每個定義圖片大小的CSS多定義一個不常用的容器，這裡我選用了斜體標籤，並定義其CSS與同根img的CSS一模一樣，並定義該容器裡的img的CSS樣式回歸margin:0;padding: 0;
我是這樣做的：

複製程式碼 程式碼如下:

/*公用*/


/*公用*/
block;overflow:hidden;overflow:hidden !important;}

/*某容器*/
#BigPic img{display:block;padding:2px;width:240px;height:160px;border: 1px solid #cccccc;}

#BigPic cite{display:block;padding:2px;width:240px;height:160px;border:1px solid #cccccc;}#BigPicginimg{display:block; :0px;padding:0px;border:none;}

3、定義圖片處理函數，參考圖片被定義的大小和原始大小，在保持比例的前提下填充滿位置，再裝進裁剪容器；

我的代碼： 複製程式碼

程式碼如下:


//圖片尺寸判斷與處理，用容器裁剪容器包圍- By COoL
function cutImgz(obj){
    var image=new Image();
    image.src=obj.src;
    image.src=obj.src;

    var iwidth=$this.width();//取得在CSS裡固定的圖片顯示寬度
    var iheight=$this.height();//取得在CSS裡固定的圖片顯示高度
  (1*image.width*iheight!=1*iwidth*image.height){
        //原始圖片的尺寸與CSS裡固定的圖片尺寸比例不一致，則進行處理
    . image.height>=iwidth/iheight){
            $this.height(iheight 'px');
   ;
        }
        else{
            height((image.height*iwidth)/image.width 'px');
        }

        //用cite裝起來，做出裁切效果
        $this.wrap('');
4、在載入頁面時遍歷所有圖片，判斷其是否在快取中，在快取中則直接進行處理，不在快取中則透過onload觸發處理；

（因為在快取的圖片秒load，在定義onload事件之前就已經load好，導致onload事件不被觸發；而不在快取的圖片，若直接處理，圖片未load出來，原始尺寸會被Image物件認為是空圖，width和height都是0

）
我的程式碼：

複製程式碼 程式碼如下:$('img').each(function() {

    var image=new Image();

    image.src=this.src;
      cutImgz(this );
    } else{
        //不存在快取中，onload處理
       (this);
        }
    }
});