zoukankan      html  css  js  c++  java
  • 缩略图自适应宽和高

    控制缩略图常见的是JS来控制,还有就是最直接的方法定义img的宽高;
    下面两种方法自适应宽和高,zhenzhai推荐使用CSS方法;
    一、CSS方法;
    主要是在CSS设置最小值和最大值(max- 100px; max-height: 100px;  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">
    <style type="text/css">

    a img
    {border:0;}
    .imgthumblist 
    { margin: 0 3px; padding: 0; list-style: none; }
        
    /*\*/ * html .imgthumblist { height: 1%; }/**/ *>.imgthumblist { overflow: hidden; }
            .imgthumblist li 
    float: left; display: inline; text-align: center; background: #F0F9FF;  108px; height: 163px; w\idth: 100px; he\ight: 155px; overflow: hidden; border: 1px solid #B9D0ED; padding: 3px; margin: 3px; }
                .imgthumblist li.list1line 
    { height: 123px; he\ight: 115px; }
                .imgthumblist li.list2line 
    { height: 143px; he\ight: 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;  100px; vertical-align: middle; }
                        .imgthumblist div img 
    { vertical-align: middle; max- 100px; max-height: 100px;  expression(this.width >100 && this.height < this.width ? 100true); height: expression(this.height > 100 ? 100true); font-size: 10px; }
                        @media all and (min
    - 0px){ .imgthumblist div img {  100px; height: 100px; } } /*for Opera Only*/
    </style>
    <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>
    二、JS方法
    我就不说了代码写的很清楚
    <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>
    <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="放大缩小">
  • 相关阅读:
    Photoshop 2021 for Mac
    viscose live serves 扩展工具更改默认自动打开的浏览器
    UML面向对象分析、建模与设计
    Shell 脚本
    早做打算,不要随遇而安。
    编程人员成长模型
    Spring AOP详解
    Mybatis逆向工程的配置
    Int和String互转的方法
    SQL学习
  • 原文地址:https://www.cnblogs.com/MaxIE/p/634579.html
Copyright © 2011-2022 走看看