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. DB2临时表空间的作用

    临时表空间分为系统临时表空间和用户临时表空间 系统临时表空间用来存储各种数据操作(排序.重组表.创建索引.连接表)中所需的内部临时数据,虽然可以创建任意多个系统临时表空间,但建议用户只使用大多数表所使 ...

  2. dictionary小项目代码管理

    软件项目开发流程 需求分析 ----> 概要设计  ---> 项目计划 ---->详细设计--->编码测试 -----> 项目测试 ---->调试修改 ---> ...

  3. java输出当前文件所在路径

    System.out.println(System.getProperty("user.dir"));//user.dir指定了当前的路径

  4. Pycharm文档模板变量

    点击这里查看JetBrains官方英文源文件 本篇Blog只是搬运外加大概翻译一下. File template variables A file template can contain varia ...

  5. python3 利用configparser生成和读取配置文件

    利用configparser生成和读取配置文件 #Author by Andy #_*_ coding:utf-8 _*_ import configparser ''' 配置文件格式 groupna ...

  6. Spring MVC processing flow

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11484057.html DispatcherServlet receives the request. ...

  7. 学习java设计模式有用吗?懂这六个原则,编程更轻松

    学习java设计模式有用吗?懂这六个原则,编程更轻松 1.开闭原则(Open Close Principle) 开闭原则就是说对扩展开放,对修改关闭.在程序需要进行拓展的时候,不能去修改原有的代码,实 ...

  8. Delphi 访问https /SSL、OpenSSL

    访问 Web 网站,最简单用法直接使用 TIdHTTP 控件: 例如:AA := IdHTTP1.Get('www.baidu.com.'); 访问 https 的网站,需要 SSL 库. 在 Win ...

  9. java.sql.SQLException: Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and (utf8mb4_0900_ai_ci,IMPLICIT) for operation '='

    查询视图时报错:java.sql.SQLException: Illegal mix of collations (utf8mb4_general_ci,IMPLICIT) and (utf8mb4_ ...

  10. 确保数据零丢失!阿里云数据库RDS for MySQL 三节点企业版正式商用

    2019年10月23号,阿里云数据库RDS for MySQL 三节点企业版正式商用,RDS for MySQL三节点企业版基于Paxos协议实现数据库复制,每个事务日志确保至少同步两个节点,实现任意 ...