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標簽中的圖片地址為一個有效的圖片地址,以便查看效果。