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