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. jvm学习(1) 总体篇

    1.1 Java体系构成 JAVA体系包括四个方面: JAVA编程语言,编辑的文件为Java源代码,文件格式为(.java):    JAVA类文件格式,编译后文件格式为(.class):    JA ...

  2. C++异常处理的深入理解

    1,问题: 1,如果在 main 函数中抛出异常会发生什么? 1,不处理,则崩溃: 2,如果异常不处理,最后会传到哪里? 3,下面的代码输出什么? 4,异常的最终处理编程实验: #include &l ...

  3. springCloud的使用06-----分布式配置

    1 分布式配置中心的搭建 1.1 在git仓库中创建配置文件 1.2 创建springboot项目引入相应jar依赖 <project xmlns="http://maven.apac ...

  4. 《零基础学习Python制作ArcGIS自定义工具》课程简介

    Python for ArcGIS Python for ArcGIS是借助Python语言实现ArcGIS自动化行为的综合,它不止是如课程标题所述的“制作ArcGIS自定义工具”,还包括使用Pyth ...

  5. 移动终端的GPU显卡介绍

    嵌入式领域里面,不同的SOC芯片往往喜欢采用不同的GPU,目前为止有4家公司提供移动端的GPU芯片:ARM.Imagination Technologies.Vivante和Nvidia (高通Adr ...

  6. linux随笔-02

    部署虚拟环境安装linux系统以及一些常用命令 工具: VmwareWorkStation  12.0——虚拟机软件(必需) RedHatEnterpriseLinux [RHEL]7.0——红帽操作 ...

  7. 力扣——Partition List(分隔链表) python实现

    题目描述: 中文: 给定一个链表和一个特定值 x,对链表进行分隔,使得所有小于 x 的节点都在大于或等于 x 的节点之前. 你应当保留两个分区中每个节点的初始相对位置. 示例: 输入: head = ...

  8. 【Java程序】tesseract_orc java上的一种实现方法

    今天想着把以前做过的一个Android的文字检测识别应用好好的回顾一下,因为以前写java程序,目的就是能用就行,不会仔细看每一个部分代码,也不会记他们的用法,不回会去查API,借鉴别人的例程,用过就 ...

  9. 转载 jQuery实现放大镜特效

    效果图. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  10. Spring开发总结

    自动装载配置开启: spring.factories内容: org.springframework.boot.autoconfigure.EnableAutoConfiguration=\ com.b ...