我們（特別是像我一樣的菜鳥）經常會遇到一個問題――圖片自適應。這個問題是很普遍的。在文章區，在論壇，可以這麼說：哪裡需要上傳圖片，哪裡就存在這個問題，而論壇上也不時有人詢問。為什麼？原因很簡單，我們不能要求網頁編輯或你的論壇會員都會裁剪圖片或了解最基本的html程式碼――儘管這並沒有太多技術含量。
先前的解決方法主要是利用js來實現，但用過的人都知道方法有點繁瑣。還有一種是在外部容器定義over-flow:hidden。但這種辦法只會切割圖片而不會自動適用。
下面的辦法的出現應該要感謝偉大的css2.0和更偉大的microsoft（沒有它就不必有這麼嗦的程式碼了^_^）。本人僅在ie6.0,ff1.5, opera7.0於winXP下測試通過，希望透過此篇文章拋磚引玉，望更多高手指點。關鍵在於：max-width:780px;以及下面那行。
固定像素適應:
運行程式碼框
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=gb2312 /> <title>css2.0 VS ie</title> <style type=text/css> <!-- body { font-size: 12px; text-align: center; margin: 0px; padding: 0px ; } #pic{ margin:0 auto; width:800px; padding:0; border:1px solid #333; } #pic img{ max-width:780px; width:expression(document.body.clientWidth > 780? 780px: auto ); border:1px dashed #000; } --> </style: auto ); border:1px dashed #000; } --> </style: auto ); border:1px dashed #000; } --> </style: auto ); border:1px dashed #000; } --> </style: auto ); border:1px dashed #000; } --> </style: auto ); border:1px dashed #000; } --> </style: auto ); border:1px dashed #000； </head> <body> <div id=pic> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=感謝blueidea被我偷鏈圖片！ /> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分程式碼，再按執行]
百分比適應:
運行程式碼框
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; charset=gb2312 /> <title>css2.0 VS ie</title> <style type=text/css> <!-- body { font-size: 12px; text-align: center; margin: 0; padding: 0 ; } #pic{ margin:0 auto; width:90%; padding:0; border:1px solid #333; } #pic img{ max-width:80%; width:expression(document.body.clientWidth>document.getElementById(pic).scrollWidth*8/10? 80%: auto ); border:1px dashed #000 ; } --> </style> </head> <body> <div id=pic> <img src=http://www.chinahtml.com/0603//articleimg/2006/03/3297/koreaad_10020.jpg alt=感謝blueidea被我偷鏈圖片！ /> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分程式碼，再按執行]
提醒:
1 此方法不只是用於img;
2 max-width,max-height,min-width,min-height.
CSS中expression使用簡介作者：dozb
定義
IE5及其以後版本支援在CSS中使用expression，用來把CSS屬性和Javascript表達式關聯起來，這裡的CSS屬性可以是元素固有的屬性，也可以是自訂屬性。是說CSS屬性後面可以是一段Javascript表達式，CSS屬性的值等於Javascript表達式計算的結果。 在表達式中可以直接引用元素本身的屬性和方法，也可以使用其他瀏覽器物件。這個表達式就好像是在這個元素的一個成員函數中一樣。
給元素固有屬性賦值
例如，你可以依照瀏覽器的大小來安置一個元素的位置。
#myDiv {
position: absolute;
width: 100px;
height: 100px;
left: expression(document.body.offsetWidth - 110 + px);
頂: expression(document.body.offsetHeight - 110 + px);
background: red;
}
給元素自訂屬性賦值
例如，消除頁面上的連結虛線框。
通常的做法是：
<a href=link1.htm onfocus=this.blur()>link1</a>
<a href=link2.htm onfocus=this.blur()>link2</a>
<a href=link3.htm onfocus=this.blur()>link3</a>
粗看或許還體現不出採用expression的優勢，但如果你的頁面上有幾十甚至上百個鏈接，這時的你難道還會機械式地Ctrl+C，Ctrl+V麼，何況兩者一比較，哪個產生的冗餘程式碼比較多呢？
採用expression的做法如下：
<style type=text/css>
a {star : expression(onfocus=this.blur)}
</style>
<a href=link1.htm>link1</a>
<a href=link2.htm>link2</a>
<a href=link3.htm>link3</a>
說明：
裡面的star就是自己任意定義的屬性，你可以隨自己喜好另外定義，接著包含在expression()裡的語句就是JS腳本，在自訂屬性與expression之間可別忘了還有一個引號，因為實質還是CSS，所以放在style標籤內，而非script內。 OK，這樣就很容易地用一句話實現了頁面中的連結虛線框的消除。不過你先別得意，如果觸發的特效是CSS的屬性變化，那麼出來的結果會跟你的本意有差別。例如你想隨滑鼠的移進移出而改變頁面中的文字框顏色更改，你可能想當然的會認為應該寫為
/* 原文有亂碼,沒時間修正,抱歉!*/
但結果卻是出現腳本出錯，正確的寫法應該把CSS樣式的定義寫入函數內，如下：
<style type=text/css>
input {star : expression(onmouseover=function()
{this.style.backgroundColor=#FF0000},
onmouseout=function(){this.style.backgroundColor=#FFFFFF}) }
</style>
<input type=text>
<input type=text>
<input type=text>
注意:
不是非常需要，一般不建議使用expression，因為expression對瀏覽器資源需求比較高