js

<script type="text/javascript" src="http://jquery.com/src/jquery-svn.js"></script>
<style type="text/css">
a{font-size:12px;color:#333333;}
.ImageList{float:left;400px;}
/*一行四个*/
.ImageList li{float:left;90px;text-align:center;margin:3px;border:solid 1px #ebebeb;background:#f7f7f7;padding:5px;}
/*图片显示区域的大小，固定一下，以便文字对其*/
.ImageList li .Image{height:60px;80px;display:block;border:0px;}
/*
使用ul li我不知道如何让图片居中,表格倒是可以，有朋友知道告诉我一声
*/
</style>
<script language="javascript">
//这里用到jQuery，写这个是向大家介绍一下jQuery的一个简单用法
//jQuery可以去官方网站下载最新的版本：http://www.jquery.org
//不用的话可以直接循环，一样可以达到效果，但是麻烦的多
$(document).ready(function(){
$(".ImageList").find("img").each(
function(){
ShowImage(this,80,60);
}
);
});

//图片缩放
function ShowImage(ImgD,proMaxWidth,proMaxHeight){
var image=new Image();
image.src=ImgD.src;

if(image.width>0 && image.height>0){
var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.proMaxHeight/image.height;

if(rate <= 1){
ImgD.style.width = image.width*rate;
ImgD.style.height =image.height*rate;
}
else {
ImgD.style.width = image.width;
ImgD.style.height =image.height;
}
}
}
</script>

如果图片很大，刷新一下页面，本机无误

<ul class="ImageList">
<li><span class="Image"><img src="http://image2.sina.com.cn/dy/photo/m/1227/U1565P1T275D253F5349DT20061227093648.jpg" /></span><a href="#" class="Text">图片标题</a></li>
<li><span class="Image"><img src="http://image2.sina.com.cn/dy/photo/m/0112/U1565P1T275D262F5349DT20070112113022.jpg" /></span><a href="#" class="Text">图片标题</a></li>
<li><span class="Image"><img src="http://image2.sina.com.cn/dy/temp/119/2006-04-24/U1075P1T119D49F2656DT20070112161019.jpg" /></span><a href="#" class="Text">图片标题</a></li>
<li><span class="Image"><img src="http://image2.sina.com.cn/dy/photo/m/1229/U1565P1T275D255F5349DT20061229094706.jpg" /></span><a href="#" class="Text">图片标题</a></li>
<li><span class="Image"><img src="http://home.bmecv.com.cn/UploadFiles/User/chanlaye/Hankx_200712015105431076.jpg" /></span><a href="#" class="Text">图片标题</a></li>
<li><span class="Image"><img src="http://www.baidu.com/img/logo.gif"/></span><a href="#" class="Text">图片标题</a></li>
<li><span class="Image"><img src="http://image2.sina.com.cn/dy/photo/m/1227/U1565P1T275D253F5349DT20061227093648.jpg" /></span><a href="#" class="Text">图片标题</a></li>
<li><span class="Image"><img src="http://image2.sina.com.cn/dy/photo/m/1227/U1565P1T275D253F5349DT20061227093648.jpg" /></span><a href="#" class="Text">图片标题</a></li>
</ul>