图片自动等比例缩小，其实如果不考虑ie6的话，用css就可以实现，设定img的max-width和max-height，而<img>标签内不设定widht和height即可。
ie7已经支持max-width和max-height，这是为数不多的好消息之一。但是对于ie6及以前的版本，就只能用js来设置了。
在ff2.0/ie6/ie7中测试通过。opera8.5 垂直居中未通过。
以下是引用片段：
<!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>
###############################################
另一种方法：兼容IE6 7 8 FF等主流浏览器 div中图片垂直居中,图片自动按边框比例缩放
<!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>科杰在线pc354.com</title>
<script language=javascript src="autoImg.js"></script>
</head><body>
<style type="text/css">
.box{
width:200px; height:200px; border: 1px solid #eee;
/**//*非IE的主流浏览器识别的垂直居中的方法*/
display: table-cell;vertical-align:middle;/**//*设置水平居中*/
text-align:center;/**//* 针对IE的Hack */
*display: block;
*font-size: 175px;/**//*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/**//*防止非utf-8引起的hack失效问题，如gbk编码*/}
.box img{/**//*设置图片垂直居中*/vertical-align:middle;}
</style>
<div class="box">
<img src="pc354.com.jpg" onload="autoimg(this,200,200)" /></div>
</body>
</html>
请将下面绿色文字部分全选存成 autoImg.js文件
// JavaScript Document
function cssX(elem){//直接得到宽度
if(elem.style.width){return elem.style.width;}
if(elem.currentStyle)return elem.currentStyle.width;
if(document.defaultView && document.defaultView.getComputedStyle)
{return document.defaultView.getComputedStyle(elem,"").getPropertyValue("width");}
}
function cssY(elem){//直接得到高度
if(elem.style.height){return elem.style.height;}
if(elem.currentStyle)return elem.currentStyle.height;
if(document.defaultView && document.defaultView.getComputedStyle)
{return document.defaultView.getComputedStyle(elem,"").getPropertyValue("height"); }
}
var resetCSS=function(elem,prop){
var old ={};
for (var i in prop){
old[i] =elem.style[i];
elem.style[i] = prop[i];
}
return old;
}
var restoreCSS=function(elem,prop){
for (var i in prop)
{elem.style[i]=prop[i];}
}
function getWidth(elem){
if(elem.style.display!="none"){
return elem.offsetWidth || parseInt(cssX(elem));
}
var old = resetCSS(elem,{
display: '',
visibility: 'hidden',
position: 'absolute'
});
var w = elem.clientWidth || parseInt(cssX(elem));
restoreCSS(elem,old);
return w;
}
function getHeight(elem){
if(elem.style.display!="none"){
return elem.offsetWidth || parseInt(cssY(elem));
}
var old = resetCSS(elem,{
display: '',
visibility: 'hidden',
position: 'absolute'
});
var w = elem.clientHeight || parseInt(cssY(elem));
restoreCSS(elem,old);
return w;
}
function autoimg(obj,width,height)
{
if(obj==undefined)
{ //得到触发事件的元素
var evt= window.event;
var obj = evt.target||evt.srcElement;
}
width=width||getWidth(obj.parentElement); //若不指定宽度则得到其父元素的宽度
height=height||getHeight(obj.parentElement);
myImage = new Image();
myImage.src = obj.src;
if (myImage.width>0 && myImage.height>0)
{
var rate = 1;
if (myImage.width>width || myImage.height>height)
{
if (width/myImage.width<height/myImage.height)
{
rate = width/myImage.width;
}
else
{
rate = height/myImage.height;
}
}
obj.width = myImage.width*rate;
obj.height = myImage.height*rate;
}
}
