js和jquery如何获取图片真实的宽度和高度
转载 & & 投稿：whsnow
按照插入的图片的尺寸来判断图片是横图还是竖图。然后判断过后给予不同的展示方式，下面为大家介绍下js和jquery如何获取图片真实的宽度和高度
1、什么时候需要获取图片真实的宽度和高度
在做pc网页的时候，有时候会考虑按照插入的图片的尺寸来判断图片是横图还是竖图。然后判断过后给予不同的展示方式！
另外一种就是在手机页面上，在新闻页插入的图片往往都是按照图片的原尺寸来展示，如果手机屏幕太小，太大的图就会超出去！这时候有两种解决办法
1）给所有的图片加上这样的样式
.news img{margin:5 display:width:100%; height:}
但是这种方式有另外一个问题就是，如果插入的图片本身就很小的话，也会被直接拉伸成100%显示，显然这是不合理的！那么这里就介绍另外一种方式就是通过js动态展示图片的尺寸！
2）js动态获取图片的尺寸
jquery方式
var _w = parseInt($(window).width());//获取浏览器的宽度
$(".new_mess_c img").each(function(i){
var img = $(this);
var realW//真实的宽度
var realH//真实的高度
//这里做下说明，$("&img/&")这里是创建一个临时的img标签，类似js创建一个new Image()对象！
$("&img/&").attr("src", $(img).attr("src")).load(function() {
如果要获取图片的真实的宽度和高度有三点必须注意
1、需要创建一个image对象：如这里的$("&img/&")
2、指定图片的src路径
3、一定要在图片加载完成后执行如.load()函数里执行
realWidth = this.
realHeight = this.
//如果真实的宽度大于浏览器的宽度就按照100%显示
if(realWidth&=_w){
$(img).css("width","100%").css("height","auto");
else{//如果小于浏览器的宽度按照原尺寸显示
$(img).css("width",realWidth+'px').css("height",realHeight+'px');
window.onload = function(){
function getViewSize() {//获取浏览器视口的宽高
"w": window['innerWidth'] || document.documentElement.clientWidth,
(www.jb51.net) "h": window['innerHeight'] || document.documentElement.clientHeight
function getFullSize() {//获取浏览器最大的宽度
var w = Math.max(document.documentElement.clientWidth, document.body.clientWidth) +
Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
var h = Math.max(document.documentElement.clientHeight, document.body.clientHeight) +
Math.max(document.documentElement.scrollTop, document.body.scrollTop);
w = Math.max(document.documentElement.scrollWidth, w);
h = Math.max(document.documentElement.scrollHeight, h);
var _sv_w = getViewSize()["w"];
var _sf_w = getFullSize()["w"];
var _w = _sv_w;//这里用视口的宽度，具体视情况
var Imgarray = document.getElementsByTagName("img");
var realW//真实的宽度
var realH//真实的高度
for(var i =0;i&Imgarray.i++){
var imgtemp = new Image();//创建一个image对象
imgtemp.src = Imgarray[i].
imgtemp.index =//指定一个检索值，用于确定是哪张图
imgtemp.onload = function(){//图片加载完成后执行
var _stemp =//将当前指针复制给新的变量，不然会导致变量共用
realWidth = this.
realHeight = this.
if(realWidth &=_w )
Imgarray[_stemp.index].style.width = _w+'px';
Imgarray[_stemp.index].style.height = 'auto';
Imgarray[_stemp.index].style.width = realWidth+'px';
Imgarray[_stemp.index].style.height = realHeight+'px';
上面两种方法中jquery比较简单，实现起来比较快，第二种比较复杂些，但是执行起来比jquery要快!
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具2014年4月 PHP大版内专家分月排行榜第二2014年3月 PHP大版内专家分月排行榜第二2014年3月 Web 开发大版内专家分月排行榜第二2014年2月 PHP大版内专家分月排行榜第二
2014年4月 Web 开发大版内专家分月排行榜第三
2015年7月 Web 开发大版内专家分月排行榜第三
匿名用户不能发表回复！|Javascript获取图片原始宽度和高度的方法详解_javascript技巧
网上关于利用Javascript获取图片原始宽度和高度的方法有很多，本文将再次给大家谈谈这个问题，或许会对一些人能有所帮助。
页面中的img元素，想要获取它的原始尺寸，以宽度为例，可能首先想到的是元素的innerWidth属性，或者jQuery中的width()方法。
&img id="img" src="1.jpg"&
&script type="text/javascript"&
var img = document.getElementById("img");
console.log(img.innerWidth); // 600
这样貌似可以拿到图片的尺寸。
但是如果给img元素增加了width属性，比如图片实际宽度是600，设置了width为400。这时候innerWidth为400，而不是600。显然，用innerWidth获取图片原始尺寸是不靠谱的。
这是因为 innerWidth属性获取的是元素盒模型的实际渲染的宽度，而不是图片的原始宽度。
&img id="img" src="1.jpg" width="400"&
&script type="text/javascript"&
var img = document.getElementById("img");
console.log(img.innerWidth); // 400
jQuery的width()方法在底层调用的是innerWidth属性，所以width()方法获取的宽度也不是图片的原始宽度。
那么该怎么获取img元素的原始宽度呢？
naturalWidth / naturalHeight
HTML5提供了一个新属性naturalWidth/naturalHeight可以直接获取图片的原始宽高。这两个属性在Firefox/Chrome/Safari/Opera及IE9里已经实现。
var naturalWidth = document.getElementById('img').naturalWidth,
naturalHeight = document.getElementById('img').naturalH
naturalWidth / naturalHeight在各大浏览器中的兼容性如下：
图片截取自：http://caniuse.com/#search=naturalWidth
所以，如果不考虑兼容至IE8的，可以放心使用naturalWidth / naturalHeight属性了。
IE7/8中的兼容性实现：
在IE8及以前版本的浏览器并不支持naturalWidth和naturalHeight属性。
在IE7/8中，我们可以采用new Image()的方式来获取图片的原始尺寸，如下：
function getNaturalSize (Domlement) {
var img = new Image();
img.src = DomElement.
width: img.width,
height: img.height
var natural = getNaturalSize (document.getElementById('img')),
natureWidth = natural.width,
natureHeight = natural.
IE7+浏览器都能兼容的函数封装：
function getNaturalSize (Domlement) {
var natureSize = {};
if(window.naturalWidth && window.naturalHeight) {
natureSize.width = Domlement.naturalW
natureSizeheight = Domlement.naturalH
var img = new Image();
img.src = DomElement.
natureSize.width = img.
natureSizeheight = img.
return natureS
var natural = getNaturalSize (document.getElementById('img')),
natureWidth = natural.width,
natureHeight = natural.
以上就是这篇的全部内容，希望能对大家的学习或者工作带来一定的帮助。如果有疑问大家可以留言交流。js网页如何获取手机屏幕宽度_百度知道
js网页如何获取手机屏幕宽度
网页可见区域宽：document.body.clientWidth
网页可见区域高：document.body.clientHeight
网页可见区域宽：document.body.offsetWidth (包括边线的宽)
网页可见区域高：document.body.offsetHeight (包括边线的宽)
网页正文全文宽：document.body.sc...
我有更好的答案
function a(){&屏幕宽高为：&+screen.width+&*&+screen.height；}其它：网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全文高：document.body.scrollHeight 网页被卷去的高：document.body.scrollTop 网页被卷去的左：document.body.scrollLeft 网页正文部分上：window.screenTop 网页正文部分左：window.screenLeft 屏幕分辨率的高：window.screen.height 屏幕分辨率的宽：window.screen.width 屏幕可用工作区高度：window.screen.availHeight 屏幕可用工作区宽度：window.screen.availWidth HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 event.clientX 相对文档的水平座标 event.clientY 相对文档的垂直座标 event.offsetX 相对容器的水平坐标 event.offsetY 相对容器的垂直坐标 document.documentElement.scrollTop 垂直方向滚动的值 event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
采纳率：31%
/script&不知道是不是这个
屏幕分辨率 ：pc上的桌面分辨率
。手机上是 一个型号固定的分辨率比如华为8813的分辨率是480*854。.innerHeight|| document.documentElement.clientHeight|| document.var w=window.innerWidth|| document.documentElement.clientWidth||屏幕分辨率;+head&b&内部窗口&/ + w + &*&/body&&/&b&:&/p&&&lt.getElementById(&p1&).innerHTML=&&b& + h&lt.width + &&lt.clientHdocument.body.clientWvar h=/b&&p id=&p1&&sssss&*& + screen.height+&quot:&body&var x =&html&script&gt&&#47
本回答被提问者采纳
安装一下安兔兔软件，查看系统信息，会有屏幕显示。
为您推荐：
其他类似问题
宽度 屏幕 网页 手机的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。提供主流cms教程
提供数据库教程和设计
提供各种常见网页js代码
提供常用的JS特效代码及在线演示
提供jQuery插件教程及插件下载
提供服务器常见问题及教程
提供站长技术、站长资讯等内容
提供常用开发手册和开发工具
您现在的位置：& >
深入理解高度。获取屏幕、webview、软键盘高度
导读：如果没有手动调整过webview的高度的话，默认情况下，屏幕的高度=顶部状态栏的高度+webview的高度。如果软键盘打开，则屏幕的高度=顶部状态...
如果没有手动调整过webview的高度的话，默认情况下，屏幕的高度=顶部状态栏的高度+webview的高度。
如果软键盘打开，则屏幕的高度=顶部状态栏的高度+webview的高度+软键盘的高度。
HTML5 规范目前没有提供状态栏高度和软键盘高度的直接的查询方法，不过有了Native.js，我们还是能查询到所有这些高度的数值。
背景知识介绍：
手机屏幕有真实的物理分辨率，比如小米note的高度是1920px。
但在网页里，一个10px的字体，并不会小的看不清，因为webview提供了逻辑分辨率的概念。
如果不在meta里设置，默认下小米note的放大系数scale是3，就是会放大3倍显示。
也就是对于HTML而言，小米note的高度是px。
如果网页是全屏的，没有顶部状态栏，那么一个640px高的div将撑满屏幕高度。
获取屏幕、顶部状态栏和软键盘的高度
1. 屏幕的高度
获取屏幕的高度很简单，HTML自带了screen.height，直接就可以得到屏幕的整体高度，单位是px，物理分辨率值（不是HTML的逻辑分辨率）。
HTML5Plus里提供了plus.screen.resolutionHeight方法，也是屏幕高度，但这个值是逻辑分辨率的高度。
screen.height = plus.screen.resolutionHeight*plus.screen.scale
2. 获取webview高度
虽然webview的getStyle可以得到webview的高度，但开发者如果不手动设置的话，默认值是100%，这个值对本文探讨的问题没有意义。我们需要px的物理高度。
在Android里通过如下js代码可以得到webview的高度：plus.android.invoke(plus.android.currentWebview(),&getHeight&)&
这是一段Native.js代码，由于Android的webview原生对象就有getHeight()方法，所以就可以直接这样调用。
当然webview原生对象还有很多方法属性都可以调，具体参阅[Native.js入门](http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/88)
图1（此图中，物理分辨率是蓝色字体，逻辑分辨率是黑色字体）
对于iOS，就没必要使用Native.js这么复杂的技术了，iOS的屏幕高度是固定的几个，直接判断屏幕高度和设备型号就可以了。
3. 获取状态栏高度
看上面的图自然就知道，状态栏高度=屏幕高度-webview高度。
只要webview的高度别手动设置就好。
如果你的应用是全屏的，那状态栏高度自然是0。
在小米note上，状态栏高度默认是60px。
从HBuilder6.6.1起，提供了新的api，plus.navigator.getStatusbarHeight()，专门获取状态栏高度。
4. 获取输入法高度
当弹出输入法时，在Android上，webview的高度会自动减少，留出空间给软键盘。
那么输入法高度=屏幕高度-状态栏高度-webview高度
在小米note上，默认输入法高度是 863px。
图2（此图中，物理分辨率是蓝色字体，逻辑分辨率是黑色字体）
说说HTML里的几个高度
其实HTML自己也提供了很多高度相关的api，除了screen.height还有document.body.clientHeight，document.body.scrollHeight，感觉也很容易混淆。
document.body.clientHeight是网页内容区的有效高度，符合盒模型。document.body.scrollHeight是网页可滚动区域的高度。
如图2所示：
- 此时document.body.clientHeight小于webview高度，而document.body.scrollHeight等于webview高度，即document.body.scrollHeight=plus.android.invoke(plus.android.currentWebview(),&getHeight&) 。
- 如果数字不是1-5，而是1-10，那么document.body.clientHeight会继续增加，但内容不够多，不会滚动，document.body.scrollHeight不变，仍是webview高度。
- 如果网页内容非常多，数字到了40，那document.body.clientHeight会继续增加，并且只要发生了滚动，则document.body.clientHeight=document.body.scrollHeight
其他相关知识。
监控软键盘是否弹出，Android上可以使用HTML自带的resize事件。
但是要判断横竖屏，因为横竖屏切换也会造成resize，所以高度变而宽度不变，就是软键盘弹出或消失了。
强制弹出键盘，也有Native.js示例，
转载请注明（B5教程网）原文链接：
网友评论：}