订阅
上一篇
返回
下一篇
CSS 实现的图片大小自适应
作者: Aion 日期: 2006-05-01 09:24
以前的解决方法主要是利用js来实现。还有一种是在外部容器定义over-flow:hidden。但这种办法只会切割图片而不会自动适用。
下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。
固定像素适应:
CODE:
百分比适应:
CODE:
下面的办法的出现应该感谢伟大的css2.0和更伟大的microsoft（没有它就不必有这么啰嗦的代码了^_^）。
固定像素适应:
CODE:
<!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="http://www.anycc.com/pic/content/Design/Personal.Design/Angel.down.JPG" alt="感谢Anycc.com被我盗链图片！"/>
</div>
</body>
</html>
百分比适应:
CODE:
<!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="http://www.anycc.com/pic/content/Design/Personal.Design/Angel.down.JPG" alt="感谢Anycc.com被我盗链图片！"/>
</div>
</body>
</html>
引用通告地址:
标签:
评论: 19 |
引用: 0 |
阅读: 3024
童貞
发表评论
IE下网页显示为空白的解决办法 (2008-05-28 00:03)
楚都旅游 LAMP (2008-05-21 13:41)
Union (2008-02-25 17:20)
电信封锁BT/P2P的解决办法 (2008-01-06 10:58)
2007 fleeting time (2007-12-28 15:26)
LAMP架构的B2B系统 DIV+CSS (2007-12-09 16:35)
Nov.18.2007 Sacrifice (2007-11-18 02:48)
还让不让人说话了，伟大的ZF和D组织 (2007-08-30 23:04)
July.23.2007 开心的周末 (2007-07-24 00:06)