img图片自适应宽和高[转]

控制缩略图常见的是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图片自适应宽和高[转]的更多相关文章

Android中获取图片的宽和高
在Android中,我们想获取图片的宽和高应该怎么办?一.正常加载图片的方法下获取宽和高举一个简单的例子:创建一个图片的副本 //加载原图 Bitmap bmSrc = BitmapFactory. ...
js和php计算图片自适应宽高算法实现
js Code: <script> $width = $(imgobj).width(); //图原始宽 $newheight = $(imgobj).height(); //图原始高 $ ...
css 图片等宽等高
html <div class="autoimg"> <img src="xxx.jpg" /> </div> css .a ...
requests获取图片的宽和高
try: if cover: resp = requests.get('%s?x-oss-process=image/info' % (url), timeout=30) if resp.status ...
iview Carousel 轮播图自适应宽高；iview 轮播图图片重叠问题；iview tabs 高度互相影响问题；vue this问题；
最终效果图: 一.轮播图中图片自适应宽高: <Carousel loop v-bind:height="imgHeight+'px'" v-model="caro ...
elementui 走马灯图片自适应
点击单元格后弹出对话框轮播图片,用Carousel 走马灯实现. 希望图片无论分辨率多少,都能在一屏内显示,这时就要用图片自适应. 图片外层容器,使用 flex 布局,设置对齐方式为主轴.交叉轴居中 ...
C# 上传图片前判断上传图片的宽和高
网上找了好久没有找到... 最后百度到了这句话“由上传的HttpPostFile的InputStream创建一个Image对象,然后想怎么处置就随便你了”. HTML代码: <asp:FileU ...
JS获取图片实际宽高及根据图片大小进行自适应
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ad ...
JS获取图片实际宽高
JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

随机推荐

初识Tomcat
Tomcat的安装非常简单,解压即可! Tomcat要正常运行,需要配置一个环境变量JAVA_HOME,指向jdk的主目录.
HttpWebRequest的使用
HttpWebRequest类主要利用HTTP 协议和服务器交互,通常是通过 GET 和 POST 两种方式来对数据进行获取和提交.下面对这两种方式进行一下说明: GET 方式 GET 方式通过在网络 ...
MongoDB学习笔记（三）--权限 && 导出导入备份恢复 && fsync和锁
权限绑定内网I ...
word 文档如何加密
给Word文档加密主要有以下几个方法:文件加密文件菜单设置:1.打开需要加密的Word文档.2.选“文件”的“另存为”,出现“另存为”对话框,在“工具”中选“常规选项”,出现“保存”选项卡.3.分别在 ...
KETTLE6.0版本体验小结
不知不觉Kettle以及到了6.0,名字似乎也变了Pentaho官方的名称是 Pentaho Data Integration,于是就下载了最新的版本,下载地址为: Pentaho Data Int ...
matlab使用常犯的错误
总是在最后关掉的时候忘了保存工作空间 save... 我用的版本R2013a 每次要setpath...!!!!!!!!!!
[Javascipt] Immediately-Invoker 2
Now the people at Poplar Puzzles would like you to treat an array of functions like a Queue, passing ...
（剑指Offer)面试题1：赋值运算符函数
题目: 如下为类型CMyString的声明,请为该类型添加赋值运算符函数. class CMyString{public: CMyString(char* pData=NULL); CMy ...
Xcode插件,模板安装
一:是使用工具安装 A Package Manager for Xcode -Xcode模板管理工具Alcatraz使用二:手动安装 1:打开资源库: 打开Finder---按住alt----前往- ...
[置顶] Zend Optimizer 和 Zend Debugger 同时安装
下载地址: Zend Optimizer: http://download.csdn.net/detail/wf120355/6479947 Zend Debugger: http://downlo ...

img图片自适应宽和高[转]

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

随机推荐

热门专题