控制缩略图常见的是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">

 <head>

     <style type="text/css">

         a img {

             border: 0;

         }

         .imgthumblist {

             margin: 0 3px;

             padding: 0;

             list-style: none;

         }

             .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;

             }

                 .imgthumblist li.list1line {

                     height: 123px;

                     height: 115px;

                 }

                 .imgthumblist li.list2line {

                     height: 143px;

                     height: 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>

 </head>

 <body>

     <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>

 </body>

 </html>

html

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

 <!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">

 <head>

     <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>

 </head>

 <body>

     <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="放大缩小" />

 </body>

 </html>

javascript

来自:http://www.cnblogs.com/MaxIE/archive/2007/01/30/634579.html

img图片自适应宽和高[转]的更多相关文章

  1. Android中获取图片的宽和高

    在Android中,我们想获取图片的宽和高应该怎么办?一.正常加载图片的方法下获取宽和高 举一个简单的例子:创建一个图片的副本 //加载原图 Bitmap bmSrc = BitmapFactory. ...

  2. js和php计算图片自适应宽高算法实现

    js Code: <script> $width = $(imgobj).width(); //图原始宽 $newheight = $(imgobj).height(); //图原始高 $ ...

  3. css 图片等宽等高

    html <div class="autoimg"> <img src="xxx.jpg" /> </div> css .a ...

  4. requests获取图片的宽和高

    try: if cover: resp = requests.get('%s?x-oss-process=image/info' % (url), timeout=30) if resp.status ...

  5. iview Carousel 轮播图自适应宽高；iview 轮播图 图片重叠问题；iview tabs 高度互相影响问题；vue this问题；

    最终效果图: 一.轮播图中图片自适应宽高:  <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...

  6. elementui 走马灯图片自适应

    点击单元格后弹出对话框轮播图片,用Carousel 走马灯实现. 希望图片无论分辨率多少,都能在一屏内显示,这时就要用图片自适应. 图片外层容器,使用 flex 布局,设置对齐方式为主轴.交叉轴居中 ...

  7. C# 上传图片前判断上传图片的宽和高

    网上找了好久没有找到... 最后百度到了这句话“由上传的HttpPostFile的InputStream创建一个Image对象,然后想怎么处置就随便你了”. HTML代码: <asp:FileU ...

  8. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  9. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

随机推荐

  1. 【BZOJ】【3671】【NOI2014】随机数生成器

    贪心 嗯……其实生成这个矩阵就是一个$O(n^2)$的模拟 = = 然后?字典序最小?贪心呗= =能选1就选1,然后能选2就选2…… 我们发现,对于矩阵(1,1)~(n,m),假设1的位置是(x,y) ...

  2. struts 2中为什么抽象包不能包含action？

    struts 2中为什么抽象包不能包含action?麻烦写详细点!

  3. jquery选择器用法笔记（第二部分）

    今天继续讲讲jquery选择器的更多用法,希望能给大家带来帮助. 9.$("ul li:eq(3)")  --  列表中的第四个元素(index 从 0 开始) :eq() 选择器 ...

  4. 理解 CSS 的 z-index 属性

    通常认为HTML页面是二维的,但实际上,CSS还有一个z-index属性,允许层叠元素. 所有的盒模型元素都处于三维坐标系中. 除了我们常用的横坐标和纵坐标, 盒模型元素还可以沿着“z轴”层叠摆放, ...

  5. HP Onboard Administrator 固件升级

    HP Onboard Administrator是HP公司服务器的远程管理平台.更新是一个非常简单的过程,可以完全通过办公自动化web管理界面. 1. 下载所需二进制文件 下载地址:HP BladeS ...

  6. 【小程序】component使用

    component使用 组件模板 组件模板的写法与页面模板相同.组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上. 在组件模板中可以提供一个 <slot> 节点,用于承载组 ...

  7. DockPanel 类

    DockPanel 类 .NET Framework 4.5   其他版本   此主题尚未评级 - 评价此主题   定义您可水平或垂直排列子元素的区域,互相. 继承层次结构   System.Obje ...

  8. Memcached--分布式缓存安装教程

    Memcached的Windows版本在这里下载http://code.google.com/p/memcached/wiki/PlatformWindows(或http://memcachedpro ...

  9. interllij13新建maven web工程

    1. 打开intellij,左边的可以别管它(历史) ②选择create new project(新建一个项目),选择Maven,并选择一个web模板,然后next. 3. 给自己的项目取名,grou ...

  10. 算法笔记_173:历届试题 斐波那契(Java)

    目录 1 问题描述 2 解决方案   1 问题描述 问题描述 斐波那契数列大家都非常熟悉.它的定义是: f(x) = 1 .... (x=1,2) f(x) = f(x-1) + f(x-2) ... ...