img图片自适应宽和高
控制缩略图常见的是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>
二、JS方法
我就不说了代码写的很清楚
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 <script type="text/javascript"> 5 //改变透明度参数：图片对象，透明度：1-100的值 6 function setAlpha(imgObj, opacityValue) { 7 imgObj.filters.alpha.opacity = parseInt(opacityValue); 8 } 9 10 //图片的显示大小[以宽度来限制] 11 function DrawImageW(imgObj, widthValue) { 12 var image = new Image(); 13 image.src = imgObj.src; 14 if (image.width > 0 && image.height > 0) { 15 if (image.width >= widthValue) { 16 imgObj.width = widthValue; 17 imgObj.height = (image.height * widthValue) / image.width; 18 } else { 19 imgObj.width = image.width; 20 imgObj.height = image.height; 21 } 22 } 23 } 24 25 //图片的显示大小[以高度来限制] 26 function DrawImageH(imgObj, heightValue) { 27 var image = new Image(); 28 image.src = imgObj.src; 29 if (image.width > 0 && image.height > 0) { 30 if (image.height >= heightValue) { 31 imgObj.height = heightValue; 32 imgObj.width = (image.width * heightValue) / image.height; 33 } else { 34 imgObj.width = image.width; 35 imgObj.height = image.height; 36 } 37 } 38 } 39 //图片的显示大小[宽高同时限制] 40 function DrawImage(imgObj, widthValue, heightValue) { 41 var image = new Image(); 42 image.src = imgObj.src; 43 if (image.width > 0 && image.height > 0) { 44 if (image.height > heightValue || image.width > widthValue) { 45 var h = 0, w, wflg = false; 46 if (image.height > heightValue) 47 wflg = true; 48 if (wflg) { 49 w = widthValue; 50 h = (image.height * widthValue) / image.width; 51 } 52 if (h == 0 || h > heightValue) { 53 h = heightValue; 54 w = (image.width * heightValue) / image.height; 55 } 56 //alert(w) 57 //alert(h) 58 imgObj.width = w; 59 imgObj.height = h; 60 } else { 61 imgObj.width = image.width; 62 imgObj.height = image.height; 63 } 64 } 65 } 66 67 function zoomImg(imgObj) { 68 var zoom = parseInt(imgObj.style.zoom, 10) || 100; zoom += event.wheelDelta / 12; if (zoom > 0) imgObj.style.zoom = zoom + '%'; 69 return false; 70 } 71 72 </script> 73 </head> 74 <body> 75 <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="修改透明度" /> 76 77 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" onload="javascript:DrawImageW(this,100)" title="宽在100以内" /> 78 79 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" onload="javascript:DrawImageH(this,100)" title="高在100以内" /> 80 81 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/3200612221928.jpg" onload="javascript:DrawImage(this,100,100)" title="宽高在100以内" /><br /> 82 83 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" onload="javascript:DrawImageW(this,100)" title="宽在100以内" /> 84 85 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" onload="javascript:DrawImageH(this,100)" title="高在100以内" /> 86 87 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/p20061222185348.jpg" onload="javascript:DrawImage(this,100,100)" title="宽高在100以内" /><br /> 88 89 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" onload="javascript:DrawImageW(this,100)" title="宽在100以内" /> 90 91 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" onload="javascript:DrawImageW(this,100)" title="高在100以内" /> 92 93 <img src="http://www.liaozhenxin.com/blog/attachments/month_0612/v2006122219452.jpg" onload="javascript:DrawImage(this,100,100)" onmousewheel="return zoomImg(this)" title="放大缩小" /> 94 </body> 95 </html>
来自:http://www.cnblogs.com/MaxIE/archive/2007/01/30/634579.html