<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Jerry Qu's HTML document</title>
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="X-UA-Compatible" content="IE=7">
<style type="text/css" title="default" media="screen">
/*<![CDATA[*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,dfn,em,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym {border:0;}
.cls:after {content: ".";display: block;height: 0;clear:both;visibility: hidden;}
.cls {*zoom:1;}
h1,h2 {font-size:16px;font-weight:bold;padding:20px;}
.img {display:table-cell;vertical-align: middle;*display:block;overflow:hidden;text-align:center;white-space:nowrap;word-break:keep-all;}
.img .vam {display:none;*display: inline;*zoom:1;0;height:100%;vertical-align: middle;}
.img img {vertical-align: middle;}
.list {margin:20px;overflow:hidden;background-color:#dcdcdc;}
.list ul li {float:left;background-color:#fff;overflow:hidden;}
.list1 {506px;}
.list1 ul {520px;}
.list1 ul li,
.list1 .img {160px;height:120px;}
.list1 ul li {margin-right:10px;margin-bottom:10px;border:1px solid #ccc;}
.list1 .img img {max-160px;max-height:120px;}
.list2 {476px;}
.list2 ul {486px;}
.list2 ul li,
.list2 .img {150px;height:150px;}
.list2 ul li {margin-right:10px;margin-bottom:10px;border:1px solid #ccc;}
.list2 .img img {max-150px;max-height:150px;}
.list3 {416px;}
.list3 ul {436px;overflow:hidden;}
.list3 ul li,
.list3 .img {120px;height:150px;}
.list3 ul li {margin-right:10px;margin-bottom:10px;border:1px solid #ccc;padding:5px;}
.list3 .img img {max-120px;max-height:150px;}
/*]]>*/
</style>
<script type="text/javascript">
function resize(a,b,c){
var w = a.width;
var h = a.height;
var scale_get = w/h;
var scale_set = b/c;
if (w > b && h > c)
{
if (scale_get >= scale_set)
{
a.style.width = b+"px";
}else{
a.style.height = c+"px";
}
}else if(w < b && h < c){
//alert(a.src)
}else if(w >= b){
//alert(a.src);
a.style.width = b+"px";
}else if(h <= c){
a.style.height = c+"px";
}
}
</script>
</head>
<body>
<h1>无法预知尺寸图片展示解决方案</h1>
<h2>160x120 有边框规格</h2>
<div class="list list1">
<ul class="cls">
<li><a href="" class="img"><span class="vam"></span><img src="images/140x120.png" alt="图片说明" onload="resize(this,160,120)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/280x260.png" alt="图片说明" onload="resize(this,160,120)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/310x360.png" alt="图片说明" onload="resize(this,160,120)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/60x30.png" alt="图片说明" onload="resize(this,160,120)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/170x100.png" alt="图片说明" onload="resize(this,160,120)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/170x60.png" alt="图片说明" onload="resize(this,160,120)"></a></li>
</ul>
</div>
<h2>150x150 有边框规格</h2>
<div class="list list2">
<ul class="cls">
<li><a href="" class="img"><span class="vam"></span><img src="images/140x120.png" alt="图片说明" onload="resize(this,150,150)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/280x260.png" alt="图片说明" onload="resize(this,150,150)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/310x360.png" alt="图片说明" onload="resize(this,150,150)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/60x30.png" alt="图片说明" onload="resize(this,150,150)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/170x100.png" alt="图片说明" onload="resize(this,150,150)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/170x60.png" alt="图片说明" onload="resize(this,150,150)"></a></li>
</ul>
</div>
<h2>120x150 有边框有内边距规格</h2>
<div class="list list3">
<ul class="cls">
<li><a href="" class="img"><span class="vam"></span><img src="images/140x120.png" alt="图片说明" onload="resize(this,120,150)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/280x260.png" alt="图片说明" onload="resize(this,120,150)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/310x360.png" alt="图片说明" onload="resize(this,120,150)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/60x30.png" alt="图片说明" onload="resize(this,120,150)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/170x100.png" alt="图片说明" onload="resize(this,120,150)"></a></li>
<li><a href="" class="img"><span class="vam"></span><img src="images/170x60.png" alt="图片说明" onload="resize(this,120,150)"></a></li>
</ul>
</div>
<script type="text/javascript">
//<![CDATA[
//]]>
</script>
</body>
</html>
啥也不说了，看代码。。
效果页面
http://www.greengnn.org/demos/imglist.html