摘要：

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

<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. oracle快速创建可用用户

    执行语句 create user utaptest identified by utaptest; create tablespace utaptestspace datafile 'd:\data. ...

  2. 【html】优酷视频去广告代码

    相信大家都有这样的感受,看个视频有个30秒的广告,让人非常的不爽.同样对于我们前端童鞋来说,为了吸引用户,把制作好的视频嵌入到网页中,结果因为视频有30秒的广告不但没有吸引到多少用户,反而可能会流失一 ...

  3. jQuery（五）：文本操作

    text()可以获取或设置元素的文本内容.例如: 示例: <!DOCTYPE html> <html lang="en"> <head> < ...

  4. 利用SpringCloud搭建一个最简单的微服务框架

    http://blog.csdn.net/caicongyang/article/details/52974406 1.微服务 微服务主要包含服务注册,服务发现,服务路由,服务配置,服务熔断,服务降级 ...

  5. kd-tree理论以及在PCL 中的代码的实现

    (小技巧记录:博客园编辑的网页界面变小了使用Ctrl  ++来变大网页字体) 通过雷达,激光扫描,立体摄像机等三维测量设备获取的点云数据,具有数据量大,分布不均匀等特点,作为三维领域中一个重要的数据来 ...

  6. DBExportDoc V1.0 For MySQL

    win7系统下或者64位系统下,安装完mysql-connector-odbc驱动后,直接进入:管理工具--数据源(ODBC),点击添加不显示该驱动,该问题解决如下:进入dos命令行,输入:C:\Us ...

  7. 超级简单却不知道：html标签的嵌套规则

    XHTML的标签有许多:div.ul.li.dl.dt.dd.h1~h6.p.a.addressa.span. strong……我们在运用这些标签搭建页面结构的时候,是可以将它们无限嵌套的,但是,嵌套 ...

  8. Python 字符串操作函数二

    #-*- coding:utf-8 -*- line = "l want watch movie with you ." print(line.center(50)) print( ...

  9. Spring JDBC NamedParameterJdbcTemplate类示例

    org.springframework.jdbc.core.NamedParameterJdbcTemplate类是一个具有基本JDBC操作的模板类,允许使用命名参数而不是传统的’?‘占位符. 这个类 ...

  10. IntelliJ IDEA 2017 汉化包及教程

    一.准备 官网下载IntelliJ IDEA 2017 并安装好 下载汉化包 (百度云链接:http://pan.baidu.com/s/1slS9ZMP 密码:gp79) 二.汉化 此处有两种方法, ...