缩略图自适应宽和高
控制缩略图常见的是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="放大缩小">
下面两种方法自适应宽和高，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;}
a img
.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>我就不说了代码写的很清楚
<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="放大缩小">
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
2006-01-30 弹出窗口总结