[CSS]讓圖片自動適應div大小

woff

做網頁、論壇貼圖、寫部落格。只要有需要上傳圖片的機會，就一定常碰到這問題。一旦不小心上傳一個大於版面的圖片，輕則內容被蓋住，重則排版全亂掉，畫面慘不忍睹。

　　一般的css處理方法都是靠 over-flow:hidden; 來達成的。但這樣做有個缺點，跑出去的內容會被隱藏起來。如果文字跟著被隱藏的話就看不到了。

　　在這裡提供一個同樣用css的解決辦法吧，能夠自動調整圖片大小。其實在Mozilla系列瀏覽器中都支援Max與Min的大小設定，只要css做這樣處理，就能限定任何元素的最大或最小長寬。

　　不過偉大的Microsoft硬是不支援這指令，我們只好拉長程式碼啦，整個代碼變得落落長，因為插入了javascript在裡面。

請先打開你的網站css檔案
輸入以下代碼：

1. img {
   
2. max-width:600px;
   
3. myimg:expression(onload=function(){
   
4. this.style.width=(this.offsetWidth > 600)?"600px":"auto"});
   
5. }

複製代碼

你可以將600設為任何你要的寬度

若只想限定某個區域中的圖片，請輸入：

1. #div img {
   
2. max-width:600px;
   
3. myimg:expression(onload=function(){
   
4. this.style.width=(this.offsetWidth > 600)?"600px":"auto"});
   
5. }

複製代碼

#div就是那個區域的id，意思是＃div底下所有標籤為img的元素皆適用這個設定。如此應該就能看到成效了。

文章來源：http://blog.asikart.com/-joomla-31/128-cssdiv.html