在我們設計網頁的時候，經常會遇到圖片自適應問題，實際這些工作完全可以交給瀏覽器來完成就可以了，只可惜，無論是IE還是FIREFOX在圖片自適應這個問題上都處理的不盡人意，網上實現網頁圖片寬度和高度的方法也很多，主要又兩種：
第一種是使用CSS來完成；第二種是使用Javascript來完成，根據實際的應用效果來說，使用Javascript還是比較靠譜一點，因為CSS的expression的確有點煩，筆者是指使用效果上有點惱人，本文專門把這兩種都總結一下，方便站長們參考使用。
一、使用CSS實現圖片的自適應
使用CSS實現圖片自適應很簡單，主要靠兩個參數來完成，分別是max-width和max-height，這兩個參數在FIREFOX和IE7以 上支持都很好，但是在IE6上面，效果非常糟糕，尤其是對於多張圖片的顯示，第一次顯示網頁大都很難達到圖片自適應的效果，一般都是有些能自適應，有些不 能自適應，多次刷新可能又顯示OK，就是這點就足夠煩人，而且一旦顯示多張圖片，IE 6上就卡的要命（expression在IE上比較占用資源，感覺設計是用來玩得，FIREFOX自適應效果還是比較好，速度也非常快），反正筆者至今是 沒有找到更好的CSS方法來讓IE 6完美支持圖片自適應。示例代碼如下：
img{ max-width: 128px; max-height: 128px; height:auto; zoom:expression( function(e) { if(e.width>e.height) {if (e.width>128) { e.height = e.height*(128 /e.width); e.width=128; }} else {if (e.height>128) { e.width = e.width*(128 /e.height); e.height=128; }} e.style.zoom = '1'; }(this)); overflow:hidden; }
面代碼格式上需要特別注意兩點：
1、zoom屬性里寬高賦值不能帶單位（如px），否則無效；
2、if和else語句也必須帶大括號括起來，單句指令也不行（而在很多編程語言里，單句指令可以無需大括號）；
二、使用Javascript實現的圖片自適應
使用Javascript自適應相對來說比較方便，唯一的麻煩是就是在網頁中需要對image預設置onload事件處理resize()函數，如 果對於動態網頁來說還好一點，反正是動態的，程序里加上去就OK了，可是如果對於很多篇文章而言，在里頭增加onload函數有點麻煩，除非一次性的寫個 腳本批量處理，否則后期更改或替換起來還是比較麻煩，比如圖片的可顯示寬度變化等等。
另一方面如果把寬度值寫在Javascript中，那么將帶來程序的通用性降低，下面的示例不是寫死的，已測試效果比起CSS要HAPPY的多，網 上也又很多類似的例子，不是不完成就是中間還存在某些問題，本文的例子應該會更好一點，筆者對不同的尺寸下的圖片的顯示效果做過好幾種測試了。示例如下：
//RESIZE 圖片自適應圖片寬度和高度
//參數說明：
// obj是圖片對象，this調用方法見下面示例
// maxW和maxH分別為約定的最大寬度和最大高度
function resizeimg(obj,maxW,maxH) { var imgW=obj.width; var imgH=obj.height; if(imgW>maxW||imgH>maxH) { var ratioA=imgW/maxW; var ratioB=imgH/maxH; if(ratioA>ratioB) { imgW=maxW; imgH=maxW*(imgH/imgW); } else { imgH=maxH; imgW=maxH*(imgW/imgH); } obj.width=imgW; obj.height=imgH; } }
上例的使用示例：
<img src="http://www.example.com/logo.gif" onload="resizeimg(this,600,1024);"/>
我們在制定寬度和高度值的時候，一般寬度是肯定需要限定，而高度經常不需要限制，所以可以把高度指定的大一點，如果高度也限制，那么相當於制定一個image box，下面的程序或許對您很有用（不限制圖片高度的忽略下面這個示例）。
當指定圖片BOX的時候，一般都還需要在圖片自適應之后顯示在BOX容器的中間，也就是水平和垂直都需要居中。首先需要指定BOX容器的寬度和高度，然后可以使用CSS來控制顯示效果，也可以使用Javascript控制顯示效果。示例如下：
IMAGE BOX容器：
<div id="imgbox" style="width:800px;height:800px;border:1px solid #CCCCCC">
<img src="..." onload="resizeimg(this,600,600)"/>
</div>
CSS顯示方法如下：
#imgbox {text-align:center;vertical-align:middle;} #imgbox img {vertical-align:middle;}
或使用Javascript完成：
在上文resizeimg()函數里最后只需要增加類似這樣的語句，
obj.style.margin-left=(800-imgW)/2; obj.style.margin-top=(800-imgH)/2;
即可，當然了，您總不能讓resize尺寸本來就超出BOX容器尺寸吧，否則圖片就把容器撐大，style風格肯定就對不上了。