JS获取图片的原始宽度和高度,兼容IE7,8
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的更多相关文章
- JS获取图片的原始宽度和高度
页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...
- js和jquery如何获取图片真实的宽度和高度
按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式,下面为大家介绍下js和jquery如何获取图片真实的宽度和高度 1.什么时候需要获取图片真实的宽度和高度 在做pc网页 ...
- js和jquery获取图片真实的宽度和高度
1.什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往 ...
- 如何通过js和jquery获取图片真实的宽度和高度
什么时候需要获取图片真实的宽度和高度 在做pc网页的时候,有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图.然后判断过后给予不同的展示方式! 另外一种就是在手机页面上,在新闻页插入的图片往往都 ...
- js获取图片的原始尺寸
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- Javascript获取图片原始宽度和高度的方法详解
前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...
- Js获取图片原始宽高
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...
- js获取图片信息(一)-----获取图片的原始尺寸
如何获取图片的原始尺寸大小? 如下,当给 img 设置一个固定的大小时,要怎样获取图片的原始尺寸呢? #oImg{ width: 100px; height: 100px; } <img src ...
- 【记录】JS 获取图片原始尺寸-防止图片溢出
示例代码: <div id="div_content"> <img src="http://static.cnblogs.com/images/logo ...
随机推荐
- docker-bridge network
根据下面这图示,可以了解两个container之间是如何通信的 通过ip link 和 ip a可以看到本地有个docker0 link. [root@localhost ~]# ip link : ...
- nginx之域名重定向
一般网站默认的访问端口为80,当多个域名指向同一个服务器IP时,可以nginx进行重定向,分别指向不同的目的地址或其他主机. 在nginx目录下的conf/vhost子目录下建两个conf文件,hos ...
- db2重组所有表和更新表统计信息
1.构建db2admin模式下的所有表的重组语句: select ' reorg table '||TABLE_NAME||';' from sysibm.tables where TABLE_SC ...
- Dagger2 探索记3——两大进阶组件(一)
今天要讲的时@Scope这个组件.为什么说它是进阶组件,就是因为它基本上没作用,但在理解了基本组件之后又必须用到. Scope的意思是作用域,一般用来标记@Provide方法,将生成的对象单例化.但@ ...
- mysql分表详解
经常听到有人说“数据表太大了,需要分表”,“xxxx了,要分表”的言论,那么,到底为什么要分表? 难道数据量大就要分表? mysql数据量对索引的影响 本人mysql版本为5.7 新增数据测试 为了测 ...
- Razor 保存动态表格
本文转载自 ASP.NET MVC数组模型绑定 ,https://www.cnblogs.com/choon/p/5429065.html 内容根据评论内容中的方式有所调整 在ASP.NET MVC ...
- 团队作业Bata冲刺-第二天
这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cnblo ...
- 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 ...
- C语言集成开发环境使用小记
时隔6年,我又重操C语言,是什么让我如此再下定决心?就是不想让自己所学过的知识就此荒废了,我重新以一个C语言初学者的身份(当然,稍稍有点基础,以前的知识忘得没这么快^_^)温故C语言,学习了几天,果真 ...
- xshell 挪动文件夹
cp -rp /home/d001 /home/Documents 复制/home下d001到/home下Documents -r 是遍历目录,即复制整个目录-p 是保留原有属性 查看的命令是cat ...