<!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>圖片自動等比例縮小且垂直居中-www.dbjr.com.cn </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>