摘要：

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

<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. Sahi (1) —— 快速入门（101 Tutorial）

    Sahi (1) -- 快速入门(101 Tutorial) jvm版本: 1.8.0_65 sahi版本: Sahi Pro 6.1.0 参考来源: Sahi官网 Sahi Quick Tutori ...

  2. mysql 分区处理数据

    记录一下分区代码: 1.建立存储过程,将原表按照时间转化为分区表,并建立当天分区 #alter table to partition table DELIMITER $$ USE `dc_log`$$ ...

  3. ansible 配置了端口在host文件但是还要走22 ip:60001 ansible_ssh_port=60001

    fatal: [101.251.194.102]: UNREACHABLE! => {"changed": false, "msg": "Fai ...

  4. MFC宏

    1,DECLARE_MESSAGE_MAP:在头文件中声明源文件中所含有的消息映射 2,BEGIN_MESSAGE_MAP:标记源文件消息映射的开始 3,END_MESSAGE_MA:标记源文件消息映 ...

  5. Android Studio安装Kotlin插件

    1 Kotlin语言介绍 Kotlin 是 JetBrains 在 2010 年推出的基于 JVM 的新编程语言,是一种新的静态类型编程语言.开发者称,设计它的目的是避免 Java 语言编程中的一些难 ...

  6. 通过 Spark R 操作 Hive

    作为数据工程师,我日常用的主力语言是R,HiveQL,Java与Scala.R是非常适合做数据清洗的脚本语言,并且有非常好用的服务端IDE——RStudio Server:而用户日志主要储存在hive ...

  7. Linux epoll版定时器

    #ifndef __MYTIMER_H_ #define __MYTIMER_H_ /*************** 高并发场景下的定时器 *****************/ //定时器回调函数 t ...

  8. HashMap的最大容量为什么是2的30次方？

    今天看HashMap的底层实现,发现HashMap的最大容量规定为: // 最大容量(必须是2的幂且小于2的30次方,传入容量过大将被这个值替换) static final int MAXIMUM_C ...

  9. e788. 取消JSpinner的键盘编辑能力

    // Create a nummber spinner JSpinner spinner = new JSpinner(); // Disable keyboard edits in the spin ...

  10. com.alibaba.dubbo.rpc.RpcException: Failed to invoke the method

    查看了网友们的错误原因, 需要进行实例化的类没有进行实例化,具体没有实例化的类会在错误信息中显示,在错误信息中搜索“Serializable”即可找到将其实现序列化可消除错误. 是在使用Dubbo提供 ...