控制缩略图常见的是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. C语言：用字符读取流和输出流来读写入数据。(文本文件)

    /* 文件的几种操作模式: r:只读   w:只写   rw:可读可写 文件的分类: t:文本文件(字符文件)   b:二进制文件(字节文件) 注意: 采用只读方式打开文件时,如果源文件不存在,打开文 ...

  2. 【转】Arp的攻防实战

    坦白讲,我是个小白,也就是各大黑客和安全厂商所说的目标群体,前者是攻击我,后者有可能保护我.但是无论如何,这次后者应该也很无能为力了——我遭遇到了传说中的Arp攻击. 在连续一周的时间里,我发现我无法 ...

  3. 在项目代码中载入cocostudio导出的动画并循环播放

    须要在代码中引入#include "cocostudio/CocoStudio.h" using namespace cocostudio; ArmatureDataManager ...

  4. 防盗链Nginx设置图片防盗链，设置无效的请仔细看红字

    *******************************************************************切记,替换的图片地址要使用没有防盗链的网站图片,否则由于替换的图片 ...

  5. oracle connect nocycle

    select * from uc_staff_department_level t,uc_t_staff stwhere st.id=t.staff_idand t.department_id in ...

  6. JS 提交form表单

    源码实例一:javascript 页面加裁时自动提交表单Form表单:<form method="post" id="myform" action=&qu ...

  7. Discuz常见大问题-如何开启和使用首页四格

    在论坛-首页四格中,勾选开启首页四格,然后可以选择数据来源的板块 注意首页四格刷新是有时间的,5分钟左右,不是你这里更新完了帖子那里就有了(如果你自己建的网站,可能回复和热帖都还没有) 当然你也可以使 ...

  8. STL与多线程+写时拷贝

    http://blog.csdn.net/liuxuejiang158blog/article/details/13251379 STL并不是线程安全的,当多个线程同时读取STL时没什么问题.当多个线 ...

  9. 【CSS】瀑布流布局的两种方式：传统多列浮动和绝对定位布局

    传统多列浮动 各列固定宽度,并且左浮动: 一列中的数据块为一组,列中的每个数据块依次排列即可: 更多数据加载时,需要分别插入到不同的列上: 优点: (1)布局简单,应该说没啥特别的难点: (2)不用明 ...

  10. python mongodb ubuntu

    mongodb install: sudo apt-get install mongodb Install pip 1. $ sudo apt-get install python-pip pytho ...