一個兼容多種場合的Javascript圖片大小自適應function

在實際應用中，圖片自適應大小結合水平垂直居中，是很是經常使用的手段。今天就圖片的自適應這裏推薦一個方法，此方法已經經過多種常見場合和各大瀏覽器兼容性的測試。

先看方法：

/*

1. * auto resize image
2. * @param    img     img obj
3. * @param    w       custom width
4. * @param    h       custom height
5. */
6. function resizeImage (img,w,h ) {
7.     //remove default attribute
8.     img. removeAttribute ( "width" );
9.     img. removeAttribute ( "height" );
10.     var pic;
11.     //if is ie
12.     if (window. ActiveXObject ) {
13.         var pic= new Image ( );
14.         pic. src=img. src;
15.     } else pic=img;
16.     if (pic & & pic. width & & pic. height & & w ) {
17.         if ( !h ) h=w;
18.         if (pic. width >w ||pic. height >h ) {
19.             var scale=pic. width /pic.height,fit=scale>=w/|>h;
20.             if (window. ActiveXObject ) img=img. style;
21.                 img [fit? 'width': 'height' ]=fit?w:h;
22.             //if is ie6
23.             if (window. ActiveXObject )
24.                 img [fit? 'height': 'width' ]= (fit?w:h ) * (fit? 1 /scale:scale );
25.         }
26.     }
27. };

這個方法一共測試了3種場合：

場合1，直接做用在img標籤上：

<img src=」http://img.china.alibaba.com/images/trade/other/091231/test1.jpg」 width=」400″ height=」900″ onload=」resizeImage(this,400,300)」 />

場合2，對現有標籤重置src屬性：

<img id=」test2″ src=」about:blank」 />

var test2=document.getElementById(‘test2′);

test2.onload=function(){ resizeImage(test2,400); };

test2.src=’http://img.china.alibaba.com/images/trade/other/091231/test2.jpg’;

場合3，動態加載img：

var test3=new Image();

test3.onload=function(){ resizeImage(test2,300); };

test3.src=’http://img.china.alibaba.com/images/trade/other/091231/test3.jpg’;

document.appendChild(test3);

以上3種所演繹的狀況在技術層面的差異主要有：

1. img是否存在與頁面上，在ie6下，對不存在頁面上的img的寬高自適應，對2個屬性都必需進行設定。

2. img是否自帶width, height屬性，在不刪除原有屬性的前提下，經過js設定圖片的寬高將會失效

3. img在onload的過程當中是否可見，在ie6下，對不可見的img在onload中沒法獲取圖片的寬高屬性。

同時須要注意的是，在Opera和Chrome瀏覽器下，沒有設置寬高屬性的圖片是在DOM Ready以後進行load的，全部請使用此方法的同窗注意方法調用的時機。