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 ...
随机推荐
- boostrap中lg,md,sm,xs分别对应的像素宽度
col-xs- 超小屏幕 手机 (<768px)col-sm- 小屏幕 平板 (≥768px)col-md- 中等屏幕 桌面显示器 (≥992px)col-lg- 大屏幕 大桌面显 ...
- 59.Target Sum(目标和)
Level: Medium 题目描述: You are given a list of non-negative integers, a1, a2, ..., an, and a target, ...
- int类型转换舍入问题
一,看代码 using System; using System.Collections.Generic; using System.Linq; using System.Text; using Sy ...
- hibernate 常用注解
转自:http://blog.csdn.net/numbibi/article/details/7739441 @content ejb3注解的API定义在javax.persistence.*包里面 ...
- 微软宣布加入 OpenJDK 项目
近日,微软的 Bruno Borges 在 OpenJDK 邮件列表中发布了一条消息,内容包含接下来发生的事情以及微软如何开始将其团队整合到 OpenJDK 社区.在邮件中,Bruno Borges ...
- NoWarningNoError(第八组)----Krad项目报告
Alpha阶段展示及总结 Github地址:https://github.com/NiceKingWei/krad 项目地址:119.29.32.204/krad.html 一.项目概况 本组的项目为 ...
- sqlite3 C语言 API 函数
int sqlite3_open(char *path, sqlite3 **db): 功能:打开sqlite数据库 参数: path: 数据库文件路径 db: 指向sqlite句柄的指针 返回值 ...
- Docker配置阿里云镜像加速pull
前言:默认Docker拉取镜像是从Docker Hub上拉取,但由于防火墙的原因,导致镜像下载非常慢.为了提高拉取镜像的速度,可以配置阿里镜像或是网易镜像加速,通过使用经验推荐配置阿里镜像. 申请个人 ...
- 算法 按照ASII码从小到大输出字符(数量最多)
题目描述 如果统计的个数相同,则按照ASCII码由小到大排序输出 .如果有其他字符,则对这些字符不用进行统计. 实现以下接口:输入一个字符串,对字符中的各个英文字符,数字,空格进行统计(可反复调用)按 ...
- Spring 讲解(一 )
1.如何理解 Spring 框架 简单来说,Spring 是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. 因为以前写代码的时候,在使用类对象的时候,经常需要实例化创建(new 出来) ...