2. 用css调用expression控制图片溢出后的大小；
（http://www.blog.edu.cn/user1/7987/archives/2006/1440861.shtml ）
3. 用js写函数控制图片溢出后的大小；
其中后两种都是javascript在起作用，但是工作原理不同，css中调用expression可以解决这个问题，但是解决得不好，因为如果页面中图片一多，expression中的语句会不断被调用，非常耗费客户端内存，容易导致浏览器假死；而直接用javascript，在页面onload的时候就可以轻松解决这个问题，而且只调用一次，比起expression真是好得太多，程序很简单，下面是个简单的例子，我假设这个页面图片宽度不能超过200px，而实际图片宽度是550px：
<body><img id="achome" src="http://image2.sina.com.cn/ent/y/2006-10-09/U1819P28T3D1276435F326DT20061009152013.jpg" /></body><script>
var imageArr=document.getElementById(controlID);
var imageRate = imageArr.offsetWidth / imageArr.offsetHeight;
if(imageArr.offsetWidth > maxWidth)
{
imageArr.style.width=maxWidth + "px";
imageArr.style.Height=maxWidth / imageRate + "px";
}
if(imageArr.offsetHeight > maxHeight)
{
imageArr.style.width = maxHeight * imageRate + "px";
imageArr.style.Height = maxHeight + "px";
}</script>
下面是图片自适应的:
<!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;
800px;
padding:0;
border:1px solid #333;
}
#pic img{
max-780px;
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>
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;
800px;
padding:0;
border:1px solid #333;
}
#pic img{
max-780px;
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;
800px;
padding:0;
border:1px solid #333;
}
#pic img{
max-780px;
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>
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;
800px;
padding:0;
border:1px solid #333;
}
#pic img{
max-780px;
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>