摘要：

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

<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. Go Revel - main函数分析

    运行revel命令时,首先会编译整个项目,在编译时,会根据`app.conf`配置文件生成两个源码文件`tmp/main.go`.`routes/routes.go`,其中`main.go`是整个项目 ...

  2. hbase1.4.0安装和使用

    jia下载地址:  http://mirrors.shuosc.org/apache/hbase/1.4.0/ 解压 tar -zxvf hbase-1.4.0-bin.tar.gz 修改环境变量 [ ...

  3. RavenDb学习（一）设计模式介绍

    RavenDb是一个文档型的数据库,和芒果Db是一个类型的东西,但是公司选择了它,主要是因为它对事务的支持比较好,芒果Db在事务方面有问题. 下面有一个例子. 在关系型数据库中,我们要展示以上的内容, ...

  4. Kettle 添加对应hadoop版本的支持

    在hdp的官网上有一个ETL工具叫做Talend Open Studio,然后我就下了,并且在群里询问了一下,突然间冒出来一群ETL高手,经高人指点认识了一款叫做Kettle的软件,经过这两天的试用, ...

  5. matlab std函数 用法及实例

    MATLAB常常用到std函数来进行标准差计算,下面我就通过实例介绍一下 matlab std函数怎么用. 1. std函数是用来计算标准偏差的一个函数,由于其有不同的参数,我们就用下面的例子进行介绍 ...

  6. Linux中通过/proc/stat等文件计算Cpu使用率

    Linux平台Cpu使用率的计算 proc文件系统 /proc文件系统是一个伪文件系统,它只存在内存当中,而不占用外存空间.它以文件系统的方式为内核与进程提供通信的接口.用户和应用程序可以通过/pro ...

  7. Linux：Tomcat报错： Error creating bean with name 'mapScheduler' defined in ServletContext resource 的解决方法

    2013-12-31 14:22:28 [ERROR] [ContextLoader.java->initWebApplicationContext(220) Context initializ ...

  8. Entries missing in table T028G T-CODE: OT51 SAP 传输配置操作为用户操作 SAP网银接口

    change this setting as a 'current setting' according to SAP note '135028 - Transfer IMG activity to ...

  9. 【转】【Centos】Centos下用upstart管理自己的服务程序

    Upstart是Ubuntu用来进行服务进程管理的服务,本文介绍如何利用upstart来通过Centos操作系统管理我们自己开发的应用程序. 什么时候要管理我们的应用程序?当我们开发出服务类的应用程序 ...

  10. applicationContext.xml报错org.springframework.orm.hibernate3.LocalSessionFactoryBean not found

    applicationContext.xml报错org.springframework.orm.hibernate3.LocalSessionFactoryBean not found 解决办法: 1 ...