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

随机推荐

OTL翻译(1) -- 说明
说明该文档说明的是4.0版本的ORACLE/ODBC和DB2-CLI模板库(OTL).OTL4.0(后面简称OTL)模板库是基于C++的模板的. OTL4.0是组合了C++的模板框架和OTL适配器. ...
第四章 mybatis批量insert
批量插入sql语句: INSERT INTO table (field1,field2,field3) VALUES ('a',"b","c"), ('a',& ...
关于DLL文件和EXE文件不在同一目录下的设置【转】
https://www.cnblogs.com/chaosimple/archive/2012/08/13/2636181.html 关于DLL文件和EXE文件不在同一目录下的设置在开发程序结束后, ...
svn报错can only be performed on a version resource [at this time].
报错 can only be performed on a version resource [at this time]. 有的文件能提交,有的文件不能提交猜想:是不是因为缓存问题方法:tea ...
几行简单代码实现DIV层上显示Tooltip效果
最近在做一个项目,要在鼠标移到层上后显示出tip提示,网上找了半天,都很麻烦,就自己修改了一个,记录在下面测试在IE 7.8.9及 chrome 上没问题. <HTML> <HEA ...
scala 学习笔记六推导
1.介绍在Scala中,推导将生成器.过滤器.和定义组合在一起. 2.例子有一种将result用作val(而不是var)的方式,:“就地”构建result,而不是逐项构建,利用yield关键字,当 ...
URAL 1748
题目大意:找出T组不大于ni(i=1,2,3,...,T)的因子数最多的数mi(i=1,2,3,...,T),有多个数时输出最小的. KB 64bit IO Format:%I64d & ...
Logging with PSR-3 to Improve Reusability
可以用composer的autoload来,导入自己写的类库. composer dump-autoload -o ----------------> 改成 composer update ...
System.ComponentModel.Component : MarshalByRefObject, IComponent, IDisposable
#region 程序集 System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 // C:\Windows\ ...
iptables与SELinux
iptables: 开始配置我们来配置一个filter表的防火墙.(1)查看本机关于IPTABLES的设置情况 [root@tp ~]# iptables -L Chain INPUT (policy ...

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

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

随机推荐

热门专题