naturalWidth和naturalHeight 可以直接获取img的原始宽高,而innerHight,innerWith只是获取图片所占容器盒子的宽高。

// 封装
function getNaturalSize (DomElement) {
var natureSize = {};
if(window.naturalWidth && window.naturalHeight) {
natureSize.width = DomElement.naturalWidth;
natureSizeheight = DomElement.naturalHeight;
} else {
var img = new Image();
img.src = DomElement.src;
natureSize.width = img.width;
natureSizeheight = img.height;
}
return natureSize;
} // 使用
var natural = getNaturalSize (document.getElementById('img')),
natureWidth = natural.width,
natureHeight = natural.height;

JS获取图片的原始宽度和高度,兼容IE7,8的更多相关文章

  1. JS获取图片的原始宽度和高度

    页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...

  2. js和jquery如何获取图片真实的宽度和高度

    按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度   1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...

  3. js和jquery获取图片真实的宽度和高度

    1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...

  4. 如何通过js和jquery获取图片真实的宽度和高度

    什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都 ...

  5. js获取图片的原始尺寸

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  6. Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...

  7. Js获取图片原始宽高

    如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...

  8. js获取图片信息(一)-----获取图片的原始尺寸

    如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src ...

  9. 【记录】JS 获取图片原始尺寸-防止图片溢出

    示例代码: <div id="div_content"> <img src="http://static.cnblogs.com/images/logo ...

随机推荐

  1. docker-bridge network

    根据下面这图示,可以了解两个container之间是如何通信的 通过ip link 和 ip a可以看到本地有个docker0 link. [root@localhost ~]# ip link : ...

  2. nginx之域名重定向

    一般网站默认的访问端口为80,当多个域名指向同一个服务器IP时,可以nginx进行重定向,分别指向不同的目的地址或其他主机. 在nginx目录下的conf/vhost子目录下建两个conf文件,hos ...

  3. db2重组所有表和更新表统计信息

    1.构建db2admin模式下的所有表的重组语句: select ' reorg table '||TABLE_NAME||';' from sysibm.tables where  TABLE_SC ...

  4. Dagger2 探索记3——两大进阶组件(一)

    今天要讲的时@Scope这个组件.为什么说它是进阶组件,就是因为它基本上没作用,但在理解了基本组件之后又必须用到. Scope的意思是作用域,一般用来标记@Provide方法,将生成的对象单例化.但@ ...

  5. mysql分表详解

    经常听到有人说“数据表太大了,需要分表”,“xxxx了,要分表”的言论,那么,到底为什么要分表? 难道数据量大就要分表? mysql数据量对索引的影响 本人mysql版本为5.7 新增数据测试 为了测 ...

  6. Razor 保存动态表格

    本文转载自  ASP.NET MVC数组模型绑定 ,https://www.cnblogs.com/choon/p/5429065.html 内容根据评论内容中的方式有所调整 在ASP.NET MVC ...

  7. 团队作业Bata冲刺-第二天

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...

  8. ERROR 2003 (HY000): Can't connect to MySQL server on '129.28.149.240' (111) mysql 无法远程连接

    环境: ubuntu  mysql 一. 查看端口 可以看到mysql监控的是本机Ip root@jiang:/etc/mysql/mysql.conf.d# netstat -apn|grep 33 ...

  9. C语言集成开发环境使用小记

    时隔6年,我又重操C语言,是什么让我如此再下定决心?就是不想让自己所学过的知识就此荒废了,我重新以一个C语言初学者的身份(当然,稍稍有点基础,以前的知识忘得没这么快^_^)温故C语言,学习了几天,果真 ...

  10. xshell 挪动文件夹

    cp -rp /home/d001 /home/Documents 复制/home下d001到/home下Documents -r 是遍历目录,即复制整个目录-p 是保留原有属性 查看的命令是cat ...