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 ...
随机推荐
- HMTL5滑动块研究
滑动块图片 html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
- vue中关于checkbox数据绑定v-model
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'> <input type=&qu ...
- 数据库并发及锁机制及Hibernate锁实现
数据库事务的定义 数据库事务(Database Transaction),是指作为单个逻辑工作单元执行的一系列操作.一个逻辑工作单元要成为事务,必须满足所谓的ACID(原子性.一致性.隔离性和持久性) ...
- ng2-file-upload插件在ionic3中的使用方法
本文主要说明在ionic3中使用ng2-file-upload插件,上传多种类型文件(图片.word.excel.ppt.mp4等)的使用方法. 1.html代码: <button ion-bu ...
- 2018-8-10-WPF-判断USB插拔
title author date CreateTime categories WPF 判断USB插拔 lindexi 2018-08-10 19:16:53 +0800 2018-8-5 13:0: ...
- 配置阿里云SLB全站HTTPS集群
配置阿里云SLB全站HTTPS集群(以下内容仅为流程,信息可能有些对应不上) 1 登录阿里云购买两台实例 1.1 按量付费购买两台实例 1.2 配置网络可以不选择分配外网 1.3 自定义密码 1.4 ...
- tp框架连接数据库配置及Model数据模型层
在config.php做数据库连接配置 <?php return array( //'配置项'=>'配置值' 'SHOW_PAGE_TRACE'=>true, /* 数据库设置 */ ...
- BZOJ 3105: [cqoi2013]新Nim游戏(线性基)
解题思路 \(nim\)游戏先手必胜的条件是异或和不为\(0\),也就是说第一个人拿走了若干堆后不管第二个人怎么拿都不能将剩余堆的异或和变成\(0\).考虑线性基,其实就是每个数对线性基都有贡献,任何 ...
- AcWing 207. 球形空间产生器 (高斯消元)打卡
有一个球形空间产生器能够在n维空间中产生一个坚硬的球体. 现在,你被困在了这个n维球体中,你只知道球面上n+1个点的坐标,你需要以最快的速度确定这个n维球体的球心坐标,以便于摧毁这个球形空间产生器. ...
- nginx防止SQL注入规则
$request_uriThis variable is equal to the *original* request URI as received from the client includi ...