最近給一個客戶做一個小小的圖片管理系統，圖片不經過服務器，直接用的是地址。但是他要求圖片不能變形扭曲。這樣就要在客戶端用JS做。好在有瞭jQuery，這個做起來還比較方便。自己寫瞭個小小的插件www.aiwalls.com autosize.
假設有這麼個圖片
<img src=http://up.aiwalls.com/2011/0908/20110908053241941.jpg" width="200" height="300" />
圖片的尺寸被強制的設為瞭200*300，如果這個地址的圖片比例不是2：3的話，這張圖片就會變形。所以我想辦法，讓他占據的大小依然是200*300,而且讓圖片等比例放大到最大限度。於是有瞭下面插件。
使用方法很簡單。使用前必須在頭部引入jquery庫和我的image.js
<script type="text/javascript" src="static/js/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="static/js/image.js"></script>
然後我們在圖片上加點料
<img src=http://up.aiwalls.com/2011/0908/20110908053241941.jpg" width="200" height="300" autosize='yes' pos='0' />
這裡的autosize=’yes’是默認的選擇器，image.js已經綁定瞭在文檔加載完畢的時候處理有這個標記的圖片.
pos=’0’表示長圖片居中顯示，這個值有三種選擇，如果不指定這個值，則居中顯示，也為0 .
-1:居於頂部
0:居於中間
1:居於底部
水平方向始終居中顯示.
其實這樣就可以瞭，不用加任何其他的代碼，我們上面的這張圖片已經居中顯示瞭。
我們也可以手動指定要處理的圖片。
$(“img”).autosize(‘#999’);
這樣就可以選擇所有圖片並處理它，那麼這裡有一個可選的參數，表示填充的背景色。如果不填寫這個參數，默認填充為白色http://up.aiwalls.com/2011/0908/20110908053237294.rar