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 >
|
返回顶楼 | |
发表时间:2014-08-04
<style type="text/css">
body {display:none;} </style> |
|
返回顶楼 | |
发表时间:2014-08-04
我擦 我的页面乱套了 你们呢
|
|
返回顶楼 | |
发表时间:2014-08-05
都乱了...这是个bug,前段时间我才提交过一个页面bug
|
|
返回顶楼 | |