• 获取图片的真实宽高


    获取图片高度,jq 用的是height()

    获取 宽度。jq用的是width()。

    只是这个是渲染后的宽高,也就是css设置后的宽高

    javascript 是offsetWidth offsetHeight

    相同,这个也是浏览器渲染后的大小

    那假设我想获取图片原本的大小呢?

    这个时候就须要用到Image对象了

    请看demo1:

    var img_url ='mid/01.jpg';    
    // 创建对象    
    var img = new Image();    
    // 改变图片的src    
    img.src = img_url;    
    // 载入完毕运行    
    img.onload = function(){    
        // 打印    
        alert(''+img.width+',height:'+img.height);    
    };

    //得到答案:400 400


    如今我们知道Image能够获取到图片原本的宽高


    问:那。用jquery能够么?


    答:能够

    demo2:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <style>
    *{
    margijn:0;
    padding:0;
    }
    div{
    200px;
    height:200px;
    border:1px solid #666666;


    }
    img{
    100px;
    height:100px;
    }

    </style>
    </head>
    <body>
        <div>
        <img src="mid/01.jpg" alt="">
        </div>
          div的宽:<span class="divW"></span>
          图片的原本:<span class="imgW"></span>
           图片的设置样式后的宽:<span class="imgW2"></span>

        <script src="../jquery.js"></script>
        <script>
         $(function(){
          var _w = parseInt($("div").width());
          var realWidth;//真实的宽度 
          var realHeight;//真实的高度 //这里做下说明,



          $(".divW").html($("div").width());
          $(".imgW2").html($("img").width());


          //获取浏览器的宽度 
          $("img").each(function(i)
         
          var img = $(this); 
         
          //$("<img/>")这里是创建一个暂时的img标签。类似js创建一个new Image()对象。 
        $("<img/>").attr("src", $(img).attr("src")).load(function() 
       
        /* 假设要获取图片的真实的宽度和高度有三点必须注意 1、须要创建一个image对象:如这里的$("<img/>") 2、指定图片的src路径 3、一定要在图片载入完毕后运行如.load()函数里运行 */
        realWidth = this.width;  
        realHeight = this.height; 
        //假设真实的宽度大于浏览器的宽度就依照100%显示 
        if(realWidth>=_w)
       
        $(img).css("width","100%").css("height","100%"); 
       
        else
        {
         //假设小于浏览器的宽度依照原尺寸显示 
        $(img).css("width",realWidth+'px').css("height",realHeight+'px'); 
       
        $(".imgW").html(realWidth+" 高:"+realHeight);
        }); 
       });


         
         })

    //显示效果例如以下,尽管通过js设置了图片宽100 高100。可是仍然能获取到实际为400的真实高度
        </script>

    </body>
    </html>

    參考:http://www.jb51.net/article/55776.htm



  • 相关阅读:
    在不给spring管理的类中获取类
    poi操作excel
    闭包
    输入url的过程发生了什么?
    跨域
    函数节流-防抖函数
    预解析-案例
    移动端适配方案
    实现元素水平居中和垂直居中的几种方法
    css小知识点
  • 原文地址:https://www.cnblogs.com/brucemengbm/p/7220552.html
Copyright © 2020-2023  润新知