摘要：

　　浏览器中显示的图片大小未必是他真实的高和宽，比如像下面这样，我们给他加上宽和高的样式

<img src="IE.png" style="width:25px;height:25px;">

　　这样在浏览器中显示的大小就是25px。那么我们如何获取图片的真实大小呢？，下面的代码就实现了这个功能

 <!DOCTYPE html>

 <html>

     <head>

         <meta http-equiv="Content-Type" content="text/html;charset=utf-8">

     </head>

     <body>

         <img src="IE.png" id="image" style="width:25px;height:25px;">

         <script>

             // 设置延时保证图片加载完成

             setTimeout(function() {

                 var

                 real_width,

                 real_height,

                 _im         = document.getElementById('image'),

                 im          = document.createElement('img');

                 im.src      = _im.src,

                 real_width  = im.width,

                 real_height = im.height;

                 alert(real_width+'\n'+real_height);

             },500);

         </script>

     </body>

 </html>

注意：上面代码本人在IE7+和chrome上都测试过了，因为没有装IE6，所以没法测试。

js获取图片原始大小的更多相关文章

  1. Js获取图片原始宽高

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...

  2. 【记录】JS 获取图片原始尺寸－防止图片溢出

    示例代码: <div id="div_content"> <img src="http://static.cnblogs.com/images/logo ...

  3. JS获取图片实际宽高及根据图片大小进行自适应

    JS获取图片实际宽高,以及根据图片大小进行自适应  <img src="http://xxx.jpg" id="imgs" onload="ad ...

  4. js获取图片的原始尺寸

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  5. JS获取图片的原始宽度和高度

    页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...

  6. JS获取图片实际宽高

    JS获取图片实际宽高,以及根据图片大小进行自适应 <img src="http://xxx.jpg" id="imgs" onload="ada ...

  7. 限制Xamarin获取图片的大小

    限制Xamarin获取图片的大小在App开发中,经常会使用网络图片.因为这样不仅可以减少App的大小,还可以动态更新图片.但是手机使用网络环境千差万别.当网络环境不是理想的情况下,加载网络图片就是一个 ...

  8. （转)JS获取当前对象大小以及屏幕分辨率等

    原文 JS获取当前对象大小以及屏幕分辨率等   <script type="text/javascript">function getInfo(){       var ...

  9. java获取图片原始尺寸

    java获取图片原始尺寸 URL url = null; InputStream is = null; BufferedImage img = null; try { url = new URL(pi ...

随机推荐

  1. c# comboBox输出图文效果

    核心代码:重写DrawItem事件 void Event_CboDrawItem(object sender, DrawItemEventArgs e) { ) return; var cbo = s ...

  2. ansible playbook对错误的处理

    Topics Playbooks 中的错误处理 忽略错误的命令 控制对失败的定义 覆写更改结果 Ansible 通常默认会确保检测模块和命令的返回码并且会快速失败 – 专注于一个错误除非你另作打算. ...

  3. linq操作符：转换操作符

    这些转换操作符将集合转换成数组:IEnumerable.IList.IDictionary等.转换操作符是用来实现将输入对象的类型转变为序列的功能.名称以"As"开头的转换方法可更 ...

  4. HashTable和HashMap的区别详解

    一.HashMap简介 HashMap是基于哈希表实现的,每一个元素是一个key-value对,其内部通过单链表解决冲突问题,容量不足(超过了阀值)时,同样会自动增长. HashMap是非线程安全的, ...

  5. orcale的over的使用

    --------------------------- 建表 --------------------------- create table test_user( id VARCHAR2(12), ...

  6. js类型判断的方法

    var arr=[]; alert(Object.prototype.toString.call(arr)=='[object Array]');

  7. C#里的SubString和Convert.ToDateTime

    1.C#里的SubString String.SubString(int   index,int   length) index:开始位置,从0开始 length:你要取的子字符串的长度 2.C#语言 ...

  8. Dijkstra 算法，用于对有权图进行搜索，找出图中两点的最短距离

    Dijkstra 算法,用于对有权图进行搜索,找出图中两点的最短距离,既不是DFS搜索,也不是BFS搜索. 把Dijkstra 算法应用于无权图,或者所有边的权都相等的图,Dijkstra 算法等同于 ...

  9. Java相对路径/绝对路径总结

    Version:0.9 StartHTML:-1 EndHTML:-1 StartFragment:00000099 EndFragment:00019826 Java相对路径/绝对路径总结(2) 修 ...

  10. IDEA MAVEN Failed to create a Maven project 'C:/gitProjects/mayProj/pom.xml' already exists in VFS

    When adding the module to an existing module that already has a POM, it is necessary to manually spe ...