通常我們處理縮略圖是使用后台代碼（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 | ...
代碼如下:
$(function(){
$("#demo2").autoIMG();
});
$("#demo2").autoIMG();
});