控制缩略图常见的是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. Objective-C:NSValue类的常见用法

    特殊类型的包装类:数组.结构体(OC内部的.自定义的).指针 // // main.m // 05-NSValue // // Created by ma c on 15/8/17. // Copyr ...

  2. 实现iframe窗口高度自适应的又一个巧妙思路

    domainA 中有一个页面index.html,通过iframe嵌套了domainB中的一个页面other.html由于other.html页面在iframe中显示,而且其页面内容会动态的增加或减少 ...

  3. C# 特性(Attribute)(二)

    AttributeUsage类是另外一个预定义特性类,它帮助我们控制我们自己的定制特性的使用.它描述了一个定制特性如和被使用.    AttributeUsage有三个属性,我们可以把它放置在定制属性 ...

  4. 输入框提示文字跨浏览器的placeholder-jQuery版

    <script type="text/javascript" src="jquery-1.7.2.min.js"></script> & ...

  5. Foreda8上安装CMake2.8.1.2

    本机操作系统:Linux 2.6.23.1-42.fc8 #1 SMP Tue Oct 30 13:55:12 EDT 2007 i686 i686 i386 GNU/Linux 在本机上准备安装My ...

  6. Opencv2.4.9安装和在visualstudio 2013中配置

    Opencv2.4.9安装和在visualstudio 2013中配置 下载opencv和在windows下安装: 最新版本号的opencv是2014.4.25的opencv2.4.9,这里选择当前最 ...

  7. 如何不使用pthread_cancel而杀死线程

    http://www.cnblogs.com/no7dw/archive/2012/09/27/2705847.html During the time I use standalone cross ...

  8. shell中如何取括号中的字符

    1. 使用grep(结果带括号,不知道有没有办法仅把括号中的内容匹配出来) $a='abc[edg]adfirpqu' $echo $a|grep -o '\[.*\]' #中括号的处理需要转义 [e ...

  9. Loadrunner 怎么将response的数据下载下来

    我们请求url时候会遇见返回的数据格式为json格式.但是怎么显示到reply页面呢?其实有一个参数需要设置成0 web_url("GetRequestData", "U ...

  10. ZOJ2750_Idiomatic Phrases Game(最短路)

    Idiomatic Phrases Game Time Limit: 2 Seconds      Memory Limit: 65536 KB Tom is playing a game calle ...