DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> CSS控制圖片自適應Div大小
CSS控制圖片自適應Div大小
編輯:CSS詳解     
  • CSS讓圖片自適應Div大小,對寬度執行CSS的expression指令,這個指令會在客戶端被執行,當用戶最大化顯示窗口或縮放窗口時控制圖片按比例適應Div寬度的大小。以下來看完整的示例代碼如下:

    01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd"> 02 <Html XMLns="http://www.w3.org/1999/xHtml"> 03 <head> 04 <meta http-equiv="Content-Type" content="text/Html; charset=gb2312" /> 05 <title>CSS圖片自適應Div大小</title> 06 <style type="text/CSS"> 07 body {font-size: 12px; text-align: center; margin: 0px; padding: 0px;} 08 #pic{margin:0 auto; width:800px; padding:0; border:1px solid #333;} 09 #pic img{max-width:780px;width:expression(document.body.clIEntWidth > 780? "780px": "auto");border:1px dashed #000;} 10 </style> 11 </head> 12 <body> 13 <div id="pic"> 14 <img src="/JSCSS/demoimg/wall9.jpg" alt="圖片自適應"/> 15 </div> 16 </body> 17 </Html>

    浏覽器窗口最大化後可看到圖片自適應的效果,請替換IMG標簽中的圖片地址為一個有效的圖片地址,以便查看效果。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved