CSS让图片自适应Div大小,对宽度执行CSS的expression指令,这个指令会在客户端被执行,当用户最大化显示窗口或缩放窗口时控制图片按比例适应Div宽度的大小。以下来看完整的示例代码如下:
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;} |
14 | < img src = "/jscss/demoimg/wall9.jpg" alt = "图片自适应" /> |
浏览器窗口最大化后可看到图片自适应的效果,请替换IMG标签中的图片地址为一个有效的图片地址,以便查看效果。
框架资源分享