摘要：

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

<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. HTTP1.0/1.1/2.0特性对比_转

    转自:HTTP1.0 HTTP1.1 HTTP2.0 主要特性对比  https://segmentfault.com/a/1190000013028798 HTTP1.0 早先1.0的HTTP版本, ...

  2. SecureCRT ，可是进入模拟器后TAB键还是无法补全

    SecureCRT是做网络,路由,交换机等设备的人都知道的工具 ,可是进入模拟器后TAB键还是无法补全,就很懊恼了. 设置步骤: 1)打开SecureCRT软件,选项—全局选项—常规—默认的会话设置— ...

  3. 推荐几个不错的h5游戏引擎

    http://www.phaser.io/examples http://www.cocos.com/ http://cn.cocos2d-x.org/tutorial/lists?id=30 coc ...

  4. Java堆外内存管理

    Java堆外内存管理   1.JVM可以使用的内存分外2种:堆内存和堆外内存: 堆内存完全由JVM负责分配和释放,如果程序没有缺陷代码导致内存泄露,那么就不会遇到java.lang.OutOfMemo ...

  5. symfony手动触发修饰html

    symfony会修饰一些标签,如input[type=file],input[type=checkbox],input[type=radio]等 有时html是页面生成后插入的,需要手动使symfon ...

  6. 【oneday_onepage】——The Secret Of Steve<1>

    The Secret Of SteveThe secret of Steve is simple. It explains his success and excess. It exemplifies ...

  7. java 、HashMap 和单例

    前段时间在项目中遇到一个问题.当多个系统同时运行时,大部分系统能够良好运转,部分却卡死在了启动界面.以下是我解决该问题的步骤和总结:   1.复现问题.重新走了一遍出问题的过程,发现问题的确存在.说明 ...

  8. Python 私有方法和引用计数初讲

    #私有方法的定义与调用 class Cat: def __init__(self): self.name = "" self.age = 0 def __changeage(sel ...

  9. grub的boot loader安装在磁盘上的位置

    在很多资料上介绍grub的引导过程时,都是:bios->MBR->boot loaderboot loader是grub或者lilo.但是他是放在什么位置?很多资料上都没有标明. 通过阅读 ...

  10. 【转】android中的数据存取-方式一：preference（配置）

    这种方式应该是用起来最简单的Android读写外部数据的方法了.他的用法基本上和J2SE(java.util.prefs.Preferences)中的用法一样,以一种简单. 透明的方式来保存一些用户个 ...