ddc
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
网站建设 域名注册 网站建设 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 虚拟主机 域名注册 acg王国 ACG玩家 品牌设计 上海网站建设
求创科技
网站建设
中国互联
素材出售
中国设计秀
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> DIV下图片自适应解决方法

DIV下图片自适应解决方法

来源:中国设计秀    作者:佚名    点击:866     加入收藏

     以前的解决方法主要是利用js来实现,但用过的人都知道该办法有点繁琐。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。

关键在于:max-width:780px;以及下面那行。

固定像素适应:

dotted; TABLE-LAYOUT: fixed; BORDER-TOP: #cccccc 1px dotted; BORDER-LEFT: #cccccc 1px dotted; BORDER-BOTTOM: #cccccc 1px dotted" cellSpacing=0 cellPadding=6 width="95%" align=center border=0> 
 
以下是引用片段:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 
<html xmlns="http://www.w3.org/1999/xhtml";> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css2.0 VS ie</title> 
<style type="text/css"> 
<!-- 
body { 
font-size: 12px; 
text-align: center; 
margin: 0px; 
padding: 0px; 

#pic{ 
  margin:0 auto; 
  width:800px; 
  padding:0; 
  border:1px solid #333; 
  } 
#pic img{ 
    max-width:780px; 
width:expression(document.body.clientWidth > 780? "780px": "auto" ); 
border:1px dashed #000; 

--> 
</style> 
</head> 
<body> 
<div id="pic"> 
<img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片!"/> 
</div> 
</body> 
</html>
 
百分比适应,以下是引用片段:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd";> 
<html xmlns="http://www.w3.org/1999/xhtml";> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>css2.0 VS ie</title> 
<style type="text/css"> 
<!-- 
body { 
font-size: 12px; 
text-align: center; 
margin: 0px; 
padding: 0px; 

#pic{ 
  margin:0 auto; 
  width:800px; 
  padding:0; 
  border:1px solid #333; 
  } 
#pic img{ 
    max-width:780px; 
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "780px": "auto" ); 
border:1px dashed #000; 

--> 
</style> 
</head> 
<body> 
<div id="pic"> 
<img src="/articleimg/2006/03/3297/koreaad_10020.jpg" alt="感谢blueidea被我盗链图片!"/> 
</div> 
</body> 
</html>

0
顶一下
2008-01-06 16:29:45    出处:中国设计秀cnwebshow.com
Google
热点文章/相关文章
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口