圖片自動等比例縮小，其實如果不考慮ie6的話，用css就可以實現，設定img的max-width和max-height，而<img>標簽內不設定widht和height即可。
ie7已經支持max-width和max-height，這是為數不多的好消息之一。 但是對于ie6及以前的版本，就只能用js來設置了。
在 ff 2.0/ ie6 / ie7 中測試通過。 opera 8.5 cn 垂直居中未通過，正在研究[貌似opera下如果只有圖片行高會失效……]。希望大家來測試。
<!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>圖片自動等比例縮小且垂直居中</title>
<!--[if lte ie 6]>
<script type="text/javascript" language="javascript">
function imgfix() {
//定義要限制的圖片寬高,這個寬高要同style里面定義的相同，小于限定高寬的圖片不操作
var widthrestriction = 200;
var heightrestriction = 200;
var allelements = document.getelementsbytagname('*')
for (var i = 0; i < allelements.length; i++)
{
if (allelements[i].classname.indexof('imgbox') >= 0)
{
var imgelements = allelements[i].getelementsbytagname('img');
for (var j=0; j < imgelements.length; j++)
{
if ( imgelements[j].width > widthrestriction || imgelements[j].height > heightrestriction )
{
if ( imgelements[j].width > imgelements[j].height)
{
imgelements[j].height = imgelements[j].height*(widthrestriction/imgelements[j].width);
imgelements[j].width = widthrestriction;
} else
{
imgelements[j].width = imgelements[j].width*(heightrestriction/imgelements[j].height);
imgelements[j].height = heightrestriction;
}
}
if ( imgelements[j].height < heightrestriction )
{
imgelements[j].style.paddingtop = ( heightrestriction -imgelements[j].height ) /2 + "px";
}
} /*for j*/
}
}/*for i*/
}
window.onload = imgfix;
</script>
<![endif]-->
<style type="text/css">
<!--
* {
margin:0;
padding:0;
}
.imgbox li {
list-style:none;
width:200px; /* 寬度 */
height:200px; /* 高度 */
background:#ccc;
border:1px solid #666;
text-align:center;
margin:5px;
line-height:200px;
}
.imgbox img {
max-width:200px; /* 寬度 */
max-height:200px; /* 高度 */
vertical-align:middle;
}
-->
</style>
</head>
<body>
<ul class="imgbox">
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
<li><img src="......" alt="img" /></li>
</ul>
</body>
</html>
