控制缩略图常见的是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);)
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style type="text/css"> 5 a img { 6 border: 0; 7 } 8 9 .imgthumblist { 10 margin: 0 3px; 11 padding: 0; 12 list-style: none; 13 } 14 15 .imgthumblist li { 16 float: left; 17 display: inline; 18 text-align: center; 19 background: #F0F9FF; 20 width: 108px; 21 height: 163px; 22 width: 100px; 23 height: 155px; 24 overflow: hidden; 25 border: 1px solid #B9D0ED; 26 padding: 3px; 27 margin: 3px; 28 } 29 30 .imgthumblist li.list1line { 31 height: 123px; 32 height: 115px; 33 } 34 35 .imgthumblist li.list2line { 36 height: 143px; 37 height: 135px; 38 } 39 40 .contentL .imgthumblist li { 41 margin: 0 1px 3px; 42 } 43 44 .imgthumblist p { 45 margin: 0; 46 line-height: 18px; 47 font-size: 12px; 48 } 49 50 .imgthumblist div { 51 line-height: 90px; 52 font-size: 90px; 53 height: 100px; 54 display: table; 55 } 56 57 .imgthumblist div a { 58 display: table-cell !important; 59 display: block; 60 width: 100px; 61 vertical-align: middle; 62 } 63 64 .imgthumblist div img { 65 vertical-align: middle; 66 max-width: 100px; 67 max-height: 100px; 68 width: expression(this.width >100 && this.height < this.width ? 100: true); 69 height: expression(this.height > 100 ? 100: true); 70 font-size: 10px; 71 } 72 73 @media all and (min-width: 0px) { 74 .imgthumblist div img { 75 width: 100px; 76 height: 100px; 77 } 78 } 79 /*for Opera Only*/ 80 </style> 81 </head> 82 <body> 83 <div> 84 <ul class="imgthumblist"> 85 <li class="list2line"> 86 <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> 87 <p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p> 88 <p class="smalltxt">图片数:1</p> 89 </li> 90 <li class="list2line"> 91 <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> 92 <p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p> 93 <p class="smalltxt">图片数:3</p> 94 </li> 95 <li class="list2line"> 96 <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> 97 <p><a href="http://www.liaozhenxin.com/blog/article.asp?id=155">图片名称</a></p> 98 <p class="smalltxt">图片数:4</p> 99 </li> 100 </ul> 101 </div> 102 </body> 103 </html>