原文:http://www.liaozhenxin.com/article.asp?id=155
控制缩略图常见的是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"
>
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
style
type
="text/css"
>
...
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
a img{...}{border:0;}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
.imgthumblist {...}{ margin: 0 3px; padding: 0; list-style: none; }
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//**/ * html .imgthumblist {...}{ height: 1%; }/**//**/ *>.imgthumblist {...}{ overflow: hidden; }
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
.imgthumblist li {...}{ float: left; display: inline; text-align: center; background: #F0F9FF; width: 108px; height: 163px; width: 100px; height: 155px; overflow: hidden; border: 1px solid #B9D0ED; padding: 3px; margin: 3px; }
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
.imgthumblist li.list1line {...}{ height: 123px; height: 115px; }
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
.imgthumblist li.list2line {...}{ height: 143px; height: 135px; }
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
.contentL .imgthumblist li {...}{ margin: 0 1px 3px; }
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
.imgthumblist p {...}{ margin: 0; line-height: 18px; font-size:12px}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
.imgthumblist div {...}{ line-height: 90px; font-size: 90px; height: 100px; display: table; }
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
.imgthumblist div a {...}{ display: table-cell !important; display: block; width: 100px; vertical-align: middle; }
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
.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; }
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
@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
="article.asp?id=155"
title
="图片名称"
><
img
src
="attachments/month_0612/3200612221928.jpg"
alt
="图片名称"
/></
a
></
div
>
<
p
><
a
href
="article.asp?id=155"
>
图片名称
</
a
></
p
>
<
p
class
="smalltxt"
>
图片数:1
</
p
>
</
li
>
<
li
class
="list2line"
>
<
div
><
a
href
="article.asp?id=155"
title
="图片名称"
><
img
src
="attachments/month_0612/p20061222185348.jpg"
alt
="图片名称"
/></
a
></
div
>
<
p
><
a
href
="article.asp?id=155"
>
图片名称
</
a
></
p
>
<
p
class
="smalltxt"
>
图片数:3
</
p
>
</
li
>
<
li
class
="list2line"
>
<
div
><
a
href
="article.asp?id=155"
title
="图片名称"
><
img
src
="attachments/month_0612/v2006122219452.jpg"
alt
="特别的爱给特"
/></
a
></
div
>
<
p
><
a
href
="article.asp?id=155"
>
图片名称
</
a
></
p
>
<
p
class
="smalltxt"
>
图片数:4
</
p
>
</
li
>
</
ul
>
</
div
>
二、JS方法
我就不说了代码写的很清楚
<
script
type
="text/javascript"
>
...
//改变透明度参数:图片对象,透明度:1-100的值
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function setAlpha(imgObj,opacityValue)...{
imgObj.filters.alpha.opacity=parseInt(opacityValue);
}
//图片的显示大小[以宽度来限制]
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function DrawImageW(imgObj,widthValue)...{
var image=new Image();
image.src=imgObj.src;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(image.width>0 && image.height>0)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(image.width>=widthValue)...{
imgObj.width=widthValue;
imgObj.height=(image.height*widthValue)/image.width;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
imgObj.width=image.width;
imgObj.height=image.height;
}
}
}
//图片的显示大小[以高度来限制]
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function DrawImageH(imgObj,heightValue)...{
var image=new Image();
image.src=imgObj.src;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(image.width>0 && image.height>0)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(image.height>=heightValue)...{
imgObj.height=heightValue;
imgObj.width=(image.width*heightValue)/image.height;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
imgObj.width=image.width;
imgObj.height=image.height;
}
}
}
//图片的显示大小[宽高同时限制]
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
function DrawImage(imgObj,widthValue,heightValue)...{
var image=new Image();
image.src=imgObj.src;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(image.width>0 && image.height>0)...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(image.height>heightValue||image.width>widthValue)...{
var h=0,w,wflg=false;
if(image.height>heightValue)
wflg=true;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(wflg)...{
w=widthValue;
h=(image.height*widthValue)/image.width;
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
if(h==0||h>heightValue)...{
h=heightValue;
w=(image.width*heightValue)/image.height;
}
//alert(w)
//alert(h)
imgObj.width=w;
imgObj.height=h;
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
}else...{
imgObj.width=image.width;
imgObj.height=image.height;
}
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
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
="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
="attachments/month_0612/3200612221928.jpg"
onload
="javascript:DrawImageW(this,100)"
title
="宽在100以内"
>
<
img
src
="attachments/month_0612/3200612221928.jpg"
onload
="javascript:DrawImageH(this,100)"
title
="高在100以内"
>
<
img
src
="attachments/month_0612/3200612221928.jpg"
onload
="javascript:DrawImage(this,100,100)"
title
="宽高在100以内"
><
br
>
<
img
src
="attachments/month_0612/p20061222185348.jpg"
onload
="javascript:DrawImageW(this,100)"
title
="宽在100以内"
>
<
img
src
="attachments/month_0612/p20061222185348.jpg"
onload
="javascript:DrawImageH(this,100)"
title
="高在100以内"
>
<
img
src
="attachments/month_0612/p20061222185348.jpg"
onload
="javascript:DrawImage(this,100,100)"
title
="宽高在100以内"
><
br
>
<
img
src
="attachments/month_0612/v2006122219452.jpg"
onload
="javascript:DrawImageW(this,100)"
title
="宽在100以内"
>
<
img
src
="attachments/month_0612/v2006122219452.jpg"
onload
="javascript:DrawImageW(this,100)"
title
="高在100以内"
>
<
img
src
="attachments/month_0612/v2006122219452.jpg"
onload
="javascript:DrawImage(this,100,100)"
onmousewheel
="return zoomImg(this)"
title
="放大缩小"
>