缩略图自适应宽和高

控制缩略图常见的是JS来控制，还有就是最直接的方法定义img的宽高；
下面两种方法自适应宽和高，zhenzhai推荐使用CSS方法；
一、CSS方法；
主要是在CSS设置最小值和最大值(max-width: 100px; max-height: 100px; width: expression(this.width >100 && this.height < this.width ? 100: true); height: expression(this.height > 100 ? 100: true);)

<! 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 " >
< style type = " text/css " >

a img {border:0;}
.imgthumblist  { margin: 0 3px; padding: 0; list-style: none; }
     /**/ /*\*/   *  html .imgthumblist  { height: 1%; } /**/ /**/   *> .imgthumblist  { overflow: hidden; }
        .imgthumblist li  { float: left; display: inline; text-align: center; background: #F0F9FF; width: 108px; height: 163px; w\idth: 100px; he\ight: 155px; overflow: hidden; border: 1px solid #B9D0ED; padding: 3px; margin: 3px; }
            .imgthumblist li.list1line  { height: 123px; he\ight: 115px; }
            .imgthumblist li.list2line  { height: 143px; he\ight: 135px; }
                .contentL .imgthumblist li  { margin: 0 1px 3px; }
            .imgthumblist p  { margin: 0; line-height: 18px; font-size:12px}

            .imgthumblist div  { line-height: 90px; font-size: 90px; height: 100px; display: table; }
                .imgthumblist div a  { display: table-cell !important; display: block; width: 100px; vertical-align: middle; }
                    .imgthumblist div img  { vertical-align: middle; max-width: 100px; max-height: 100px; width: expression(this.width >100 && this.height < this.width ? 100: true); height: expression(this.height > 100 ? 100: true); font-size: 10px; }
                    @media all and (min - width: 0px) { .imgthumblist div img { width: 100px; height: 100px; } }   /**/ /*for Opera Only*/
</ style >
< div >< ul class = " imgthumblist " >
< li class = " list2line " >
< div >< a href = " http://www.liaozhenxin.com/blog/article.asp?id=155 "  title = " 图片名称 " >< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg "  alt = " 图片名称 " /></ a ></ div >
< p >< a href = " http://www.liaozhenxin.com/blog/article.asp?id=155 " > 图片名称 </ a ></ p >
< p class = " smalltxt " > 图片数: 1 </ p >
</ li >
< li class = " list2line " >
< div >< a href = " http://www.liaozhenxin.com/blog/article.asp?id=155 "  title = " 图片名称 " >< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg "  alt = " 图片名称 "   /></ a ></ div >
< p >< a href = " http://www.liaozhenxin.com/blog/article.asp?id=155 " > 图片名称 </ a ></ p >
< p class = " smalltxt " > 图片数: 3 </ p >
</ li >
< li class = " list2line " >
< div >< a href = " http://www.liaozhenxin.com/blog/article.asp?id=155 "  title = " 图片名称 " >< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg "  alt = " 特别的爱给特 "   /></ a ></ div >
< p >< a href = " http://www.liaozhenxin.com/blog/article.asp?id=155 " > 图片名称 </ a ></ p >
< p class = " smalltxt " > 图片数: 4 </ p >
</ li >
</ ul >
</ div >

二、JS方法
我就不说了代码写的很清楚

< script type = " text/javascript " >

// 改变透明度参数：图片对象，透明度：1-100的值
function  setAlpha(imgObj,opacityValue) {
    imgObj.filters.alpha.opacity=parseInt(opacityValue);
    }
    
// 图片的显示大小[以宽度来限制]
function  DrawImageW(imgObj,widthValue) { 
    var image=new Image(); 
    image.src=imgObj.src; 
    if(image.width>0 && image.height>0){ 
        if(image.width>=widthValue){ 
            imgObj.width=widthValue; 
            imgObj.height=(image.height*widthValue)/image.width; 
        }else{ 
            imgObj.width=image.width; 
            imgObj.height=image.height; 
        }  
    } 
}  

// 图片的显示大小[以高度来限制]
function  DrawImageH(imgObj,heightValue) { 
    var image=new Image(); 
    image.src=imgObj.src; 
    if(image.width>0 && image.height>0){ 
        if(image.height>=heightValue){ 
            imgObj.height=heightValue; 
            imgObj.width=(image.width*heightValue)/image.height; 
        }else{ 
            imgObj.width=image.width; 
            imgObj.height=image.height; 
        }  
    } 
}  
// 图片的显示大小[宽高同时限制]
function  DrawImage(imgObj,widthValue,heightValue) { 
    var image=new Image(); 
    image.src=imgObj.src;
    if(image.width>0 && image.height>0){ 
        if(image.height>heightValue||image.width>widthValue){
            var h=0,w,wflg=false;
            if(image.height>heightValue)
                wflg=true;
            if(wflg){
                w=widthValue; 
                h=(image.height*widthValue)/image.width; 
                }
            if(h==0||h>heightValue){
                h=heightValue; 
                w=(image.width*heightValue)/image.height; 
                }
                //alert(w)
                //alert(h)
                imgObj.width=w; 
                imgObj.height=h; 
        }else{ 
            imgObj.width=image.width; 
            imgObj.height=image.height; 
        }  
    } 
}  

function  zoomImg(imgObj) {
    var zoom=parseInt(imgObj.style.zoom, 10)||100;zoom+=event.wheelDelta/12;if (zoom>0) imgObj.style.zoom=zoom+'%';
    return false;
}

</ script >
< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg "  onload = " javascript:DrawImageW(this,100); "  style = " filter:alpha(opacity=60) "  onMouseOver = " setAlpha(this,100) "  onMouseOut = " setAlpha(this,60) "  title = " 修改透明度 " >

< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg "  onload = " javascript:DrawImageW(this,100) "  title = " 宽在100以内 " >

< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg "  onload = " javascript:DrawImageH(this,100) "  title = " 高在100以内 " >

< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg "  onload = " javascript:DrawImage(this,100,100) "  title = " 宽高在100以内 " >< br >

< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg "  onload = " javascript:DrawImageW(this,100) "  title = " 宽在100以内 " >

< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg "  onload = " javascript:DrawImageH(this,100) "  title = " 高在100以内 " >

< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg "  onload = " javascript:DrawImage(this,100,100) "  title = " 宽高在100以内 " >< br >

< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg "  onload = " javascript:DrawImageW(this,100) "  title = " 宽在100以内 " >

< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg "  onload = " javascript:DrawImageW(this,100) "  title = " 高在100以内 " >

< img src = " http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg "  onload = " javascript:DrawImage(this,100,100) "  onmousewheel = " return zoomImg(this) "  title = " 放大缩小 " >