<html>
<head>
<style type="text/css">
.imgDiv {
overflow: hidden;
display:table;
border-spacing:10px;
position: absolute;
left: 50%;
top: 50%;
width: 900px;
height: 600px;
margin-left: -450px;
margin-top: -300px;
}
.imgDiv li {
width:900px;
height:600px;
text-align:center;
vertical-align:middle;
position:relative;
margin: 10px;
*float:left;
display: table-cell;
}
.imgDiv .imgDivs {
*position:absolute;
top:50%;
}
.imgDiv .imgDivs img {
*position:relative;
top:-50%;
left:-50%;
max-width:900px;
max-height:600px;
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "900px": "auto" );
height:expression(document.body.clientHeight>document.getElementById("pic").scrollheight*9/10? "600px": "auto" );
}
</style>
</head>
<body>
<div class="imgDiv">
<li><div class="imgDivs"><img src="http://mat1.qq.com/www/images/allskin/wmlogo.gif" ></div></li>
</div>
</body>
</html>
max-width:900px;
max-height:600px;
width:expression(document.body.clientWidth>document.getElementById("pic").scrollWidth*9/10? "900px": "auto" );
height:expression(document.body.clientHeight>document.getElementById("pic").scrollheight*9/10? "600px": "auto" );
其中这几句是对于img大小的处理，如果img大小超出div容器的大小，会按照这个进行缩放显示，如果img没有超出div容器的大小，会正常显示，img原来多大，就显示多大
