摘要：

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

<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. Java编程的逻辑 (46) - 剖析PriorityQueue

    本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http:/ ...

  2. 问题解决:bash: fork: retry: Resource temporarily unavailable

    linux报错: bash: fork: retry: Resource temporarily unavailable 不管是执行什么 登陆不了服务器The server refused to st ...

  3. es cat http://localhosts:9002/_cat/nodes?v

    http://localhosts:9002/_cat/nodes?v&h=http,version,jdk,disk.total,disk.used,disk.avail,disk.used ...

  4. 服务器cpu过高修复：操作系统内核bug导致

    服务器cpu过高修复:操作系统内核bug导致修改系统内核参数/etc/sysctl.conf添加下面2条参数:vm.dirty_background_ratio=5vm.dirty_ratio=10

  5. @Resource、@Autowired跟default-autowire区别联系

    @Resource.@Autowired和default-autowire区别联系 今天看了一工程,里面既有default-autowire,又有@Autowired,还有@Resource.我就不明 ...

  6. JSON常见操作

    1.JSON---> 字符串:JSON.stringify(json) 看如下代码: let json={"orderId":"E2018081400181122& ...

  7. 想做web开发 就学JavaScript

    有一天我被问到,为了快速地在 web 开发工作上增加优势,应该学习什么语言.我的思绪回到了大学,那时候我用 Pascal.Fortran.C和汇编语言,不过那个时候有不同的目标. 鉴于当前的状况和趋势 ...

  8. MY_Selenium登录126邮箱，定位不到账号输入框解决办法

    转自:https://www.cnblogs.com/wuhl-89/p/7778463.html 查看元素发现id为动态,所以不选择以id定位. 使用xpath路径定位,每次获取元素都失败,最后网上 ...

  9. 记一些常用到的python中的函数

    1. zip()函数 它的作用是从参数中按顺序一一抽出子参数组出一个新的tuple.  直接看例子: >>> mean = np.array([2, 5, 4]) >>& ...

  10. Spring系列(四)：Spring AOP详解和实现方式(xml配置和注解配置)

    参考文章:http://www.cnblogs.com/hongwz/p/5764917.html 一.什么是AOP AOP(Aspect Oriented Programming),即面向切面编程, ...