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;
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>
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>
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>