在佈局頁面時，有時會遇到大圖片將頁面容器“撐破”的情況，尤其是載入外鏈圖片（通常是通過採集的外站的圖片）。那麼本文將為您講述使用jQuery如何按比例縮放大圖片，讓大圖片自適應頁面佈局。 

通常我們處理縮圖是使用後臺程式碼（PHP、.net、Java等）根據大圖片生成一定尺寸的縮圖，來供前臺頁面呼叫，當然也有使用前臺javascript指令碼將載入後的大圖強行縮放，變成所謂的縮圖，這種方法不可取。但是，針對網站內容頁，如本站文章詳情頁，如果需要載入一張很大的圖片時，為了防止“撐破”佈局，我們使用jQuery來等比例縮放圖片。我們分兩種情況來講述： 

1.已知圖片尺寸 
複製程式碼程式碼如下:
<div id="demo1"> 
<img src="a.jpg" width="800" height="300" alt="圖片"> 
</div> 

當頁面載入的圖片中含有屬性width和height值，則可以使用幾句簡單的jQuery程式碼實現等比例縮放。 
複製程式碼

程式碼如下:
$(function(){ 
var w = $("#demo1").width();//容器寬度 
$("#demo1 img").each(function(){//如果有很多圖片，我們可以使用each()遍歷 
var img_w = $(this).width();//圖片寬度 
var img_h = $(this).height();//圖片高度 
if(img_w>w){//如果圖片寬度超出容器寬度--要撐破了 
var height = (w*img_h)/img_w; //高度等比縮放 
$(this).css({"width":w,"height":height});//設定縮放後的寬度和高度 
} 
}); 
}); 

2.未知圖片尺寸 

當頁面載入的圖片尺寸未知的情況下，上述程式碼則不能進行有效的縮放，這種情況多出現在採集的外部連結圖片。 
複製程式碼

程式碼如下:
<div id="demo2"> 
<img src="a.jpg" alt="圖片"> 
</div> 

所幸的是，有好心朋友已經寫出來專門的外掛來處理，而且跨瀏覽器，解決了前端朋友們的一大難題。 

下面隆重介紹下autoIMG。 

autoIMG可以快速對文章圖片進行尺寸自適應，它利用瀏覽器獲取圖片檔案頭尺寸資料，無需等待圖片載入完成。 

autoIMG相容：Chrome | Firefox | Sifari | Opera | IE6 | IE7 | IE8 | ... 

呼叫autoIMG外掛方法相當簡單： 
複製程式碼程式碼如下:
$(function(){ 
$("#demo2").autoIMG(); 
});