在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性,分别为
.naturalWidth 和naturalHeight属性,例子如下:

var rw = myimage.naturalWidth; // 真实图片宽度

var rh = myimage.naturalHeight; //真是图片高度

但有个前提是,必须在图片完全下载到客户端浏览器才能判断,

,目前在ie 9,Firefox, Chrome, Safari 和Opera都是可以使用的,

如果是不支持的版本浏览器,那可以用传统方法判断,如下:

var myimage = document.getElementById("myimage");

if (typeof myimage.naturalWidth == "undefined") {

// IE 6/7/8

var i = new Image();

i.src = myimage.src;

var rw = i.width;

var rh = i.height;

}

else {

// HTML5 browsers

var rw = myimage.naturalWidth;

var rh = myimage.naturalHeight;

}

.naturalWidth 和naturalHeight属性,的更多相关文章

  1. naturalWidth 与 naturalHeight

    在HTML 5中,新增加了两个用来判断图片的宽度和高度的属性(图片原始大小),分别为 naturalWidth 和naturalHeight属性,例子如下: 注意问题: - 图片没有加载的时候 值为0 ...

  2. naturalWidth与naturalHeight

    naturalWidth与naturalHeight是HTML5的新属性, 可与通过这两个属性来直接获取图片的原始宽度和高度, 现在在火狐, 谷歌, IE11均已经实现 可以看看naturalWidt ...

  3. naturalWidth、naturalHeight来获取图片的真实宽高

    一般在图片放大缩小,或动态插入图片时使用 function imagea(img){ var w = img.naturalWidth; var h = img.naturalHeight; } 注: ...

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

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

  5. JQuery Mobile - 处理图片加载失败!

    重点来了:一定要记住error事件不冒泡(如果要用js的方法替换默认出错图片,记得把img的alt属性去掉). 相关的知识点:jquery的ready方法.$("img").err ...

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

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

  7. 当h5页面图片加载失败后,给定一个默认图

    本文主要讨论页面中图片加载失败后替换默认图片的几种方式 重点来了:一定要记住error事件不冒泡. 相关的知识点:jquery的ready方法.$("img").error().i ...

  8. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  9. viewer.js图片查看器插件(可缩放/旋转/切换)

    <!doctype html> <html lang="en"> <head> <meta charset="utf-8&quo ...

随机推荐

  1. Odoo Many2many 指定默认分组过滤

    在odoo里如果想单击某个菜单打开的页面是自带过滤的,可以在打开菜单的动作中添加默认过滤来实现,今天有同学在群里问,如何在Many2many的添加更多的弹出窗口中添加类似的过滤,其实是非常非常简单的, ...

  2. 论meta name= viewport content= width=device-width initial-scale=1 minimum-scale=1 maximum-scale=1的作用

    一.先明白几个概念 phys.width: device-width: 一般我们所指的宽度width即为phys.width,而device-width又称为css-width. 其中我们可以获取ph ...

  3. 数据结构 C++ 单链表 一元多项式的相加

    #include <iostream> using namespace std; struct Node { double coe; //系数 int exp; //指数 Node *ne ...

  4. MacPort 的使用

    MacPorts 的安装和使用   官网下载最版本的 安装包   自动安装  可能会出现很慢的情况   设置环境变量   vim ~/.bash_profile      i  插入修改  :wq 保 ...

  5. dede数据库类使用方法 $dsql

    dedecms的数据库操作类,非常实用,在二次开发中尤其重要,这个数据库操作类说明算是奉献给大家的小礼物了. 引入common.inc.php文件 require_once (dirname(__FI ...

  6. windows 7 安装 telnet

    telnet 192.168.1.10 8080

  7. Ceph与OpenStack的Nova相结合

    https://ervikrant06.wordpress.com/2015/10/24/how-to-configure-ceph-as-nova-compute-backend/ 在Ceph的ad ...

  8. css3学习----transform

    css 2D转换

  9. 【Composer】实战操作一:使用库

    前言 前面我们简单介绍了composer的安装 以及 如何安装库 本文目的 主要实战讲解如何使用库,主要是PSR-0 和 PSR-4的区别,以及如何在代码中引用.关于PSR-0和PSR-4的具体区别可 ...

  10. Ubuntu 安装java环境搭建

    1.下载JDK 8从http://www.oracle.com/technetwork/java/javasebusiness/downloads/选择下载JDK的最新版本 JDK 8. 2.解压文件 ...