论坛首页 Web前端技术论坛

CSS控制图片自适应Div大小

浏览 6218 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2014-07-30  

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>
margin: 0px !important; padding: 0px !important; border: 0px !important; background-image: none !impor
   发表时间:2014-08-04  
<style type="text/css">
body {display:none;}
</style>
0 请登录后投票
   发表时间:2014-08-04  
我擦 我的页面乱套了 你们呢
0 请登录后投票
   发表时间:2014-08-05  
都乱了...这是个bug,前段时间我才提交过一个页面bug
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics