控制缩略图常见的是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. Java数据库编程技术

    1. 建立数据库连接 例1.1 使用JDBC-ODBC桥来连接一个Access数据库. 该数据库的名称为FirstExample,在ODBC数据源中的名称为forStudy,用户名和密码均为空. pa ...

  2. sql server 将字符串分割成表函数 strsplitetotable

    在sql server里,调用存储过程时,经常需要将数据拼成字符串做为参数调用存储过程,而在储存过程中分割字符串虽然简单但麻烦,封装了该函数,可以将拼串分割成内存表返回,方便使用,返回的表字段从a,b ...

  3. iOS开发-多线程NSOperation和NSOperationQueue

    上一篇文章稍微提及了一下NSThread的使用,NSThread能直观地控制线程对象,不过需要自己管理线程的生命周期,线程同步,用起来比较繁琐,而且比较容易出错.不过Apple给出了自己的解决方案NS ...

  4. 开源 java CMS - FreeCMS2.2 网站管理

    项目地址:http://www.freeteam.cn/ 网站管理 FreeCMS支持站点群模式,并支持无限树级管理. 网站的相关文件在site文件夹下,每一个网站有自己的文件夹,源文件文件夹名就是自 ...

  5. 《TCP/IP具体解释卷2：实现》笔记--接口层

    接口层包含在本地网上发送和接收分组的硬件与软件. 我们用设备驱动程序来表示与硬件及网络接口通信的软件,网络接口是指在一个特定网络上硬件与设备驱动器之间的接口. Net/3接口层试图在网络协议和连接到一 ...

  6. Ext 弹出窗体显示到iframe之外

    主要是这句话 var _win = new top.Ext.Window({});即可完成需要功能 var _win = new top.Ext.Window({           title: ' ...

  7. [Algorithm] Find first missing positive integer

    Given an array of integers, find the first missing positive integer in linear time and constant spac ...

  8. 【nodejs】用express又做了份crud

    感觉crud是高级形式的hello world了. app代码: 'use strict'; var express=require('express'); var http=require('htt ...

  9. 在Ubuntu 桌面版 12.04 LTS安装并运行SSH

    第一步:安装openssh-server #sudo apt-get install openssh-server 第二步:查看ssh服务是否已经运行,执行 #ps -e | grep ssh 执行完 ...

  10. Java 吸血鬼数字

    非常羞愧(事实上没什么羞愧.水平就这样).搞了半晌才写出来了一个Java 版求四位吸血鬼数字的方法 吸血鬼数字是指位数为偶数的数字.能够由一对数字相乘而得到.而这对数字各包括乘积的一半位数的数字,当中 ...