天空下的雨：今天刚好碰到这样一个问题，一个图片展示的页面，由于图片过大，把网页给撑开了，这样及其影响页面美观。如果设置固定的宽度和高度，图片又会不好看。于是，参考了网上的代码，加以改进 ，并 用Ajax加入了预载入效果。完美解决此类问题。

<style type="text/css">
PhotoLoad {
 overflow:hidden;width:180px;height:125px;margin:10px auto 0px auto;border:1px #cccccc solid;text-align:center
}
.PhotoLoad_1 {
 overflow:hidden;width:180px;height:125px;margin:10px auto 0px auto;border:1px #6C6 solid;text-align:center
}
</style>
<script type="text/javascript">
function $(obj){return document.getElementById(obj)}
function SImg(ImgId,_W,_H){window.setTimeout("InfoImgNow('"+ImgId+"',"+_W+","+_H+")",500)}
function InfoImgNow(ImgId,_W,_H) {
if(!$(ImgId))return;
var ImgUrl=$(ImgId).src;
var IW=$(ImgId).width;
var IH=$(ImgId).height;
if(IW>_W){
 IW=_W;
 IH=_W/$(ImgId).widthIH;
 }
if(IH>_H){
 IH=_H;
 IW=_H/$(ImgId).height$(ImgId).width;
 }
if(IH<_H){
 if(!$(ImgId+"_Div"))return;
 var MT=(_H-IH)/2;
 $(ImgId+"_Div").innerHTML="<img src='"+ImgUrl+"' style='width:"+IW+"px;height:"+IH+"px;margin-top:"+MT+"px' oncontextmenu='return false'>";
 }else{
 $(ImgId+"_Div").innerHTML="<img src='"+ImgUrl+"' style='width:"+IW+"px;height:"+IH+"px' oncontextmenu='return false'></a>";
 }
}
</script>

<div id='Photo[page:i]_Div' class='PhotoLoad' onclick="window.open('链接网址')" onmouseover="this.className='PhotoLoad_1'" onmouseout="this.className='PhotoLoad'"><img src='style/photoload.gif' /><a href="[page:aurl]" title="[page:titlex]" target="_blank"><img id='Photo[page:i]' src='[page:Indexpic]' onload='SImg(this.id,180,125)' onerror="this.src='style/noerror.gif'"></a>
</div>
/[page:i] 图片编号（div img 要一致）/