js和jQuery如何获得图片的真正宽度和高度

1。你什么时候需要得到图片的真实宽度和高度

在做PC网页时,有时会根据插入图片的大小来判断图片是水平的还是垂直的,然后判断不同的呈现方式!

另一种是在手机页面上,新闻页面上插入的图片总是按照图片的大小显示。如果手机屏幕太小,图片太大,这时会出现两种解决方案。

1)将该样式添加到所有图片中



复制代码代码如下所示:

。新闻img { margin: 5px汽车;显示:块;宽度:100%;高度:汽车;}



但是还有另外一个问题。如果插入的图片很小,它会直接拉伸到100%,这显然是不合理的。

2)js动态获取图片的大小。

jQuery模式

代码如下




无功_w = parseInt($(窗口)(宽度); / /)得到浏览器的宽度
$(。new_mess_c IMG)。每个(功能(我){)
VaR img =美元(这);
无功realwidth; / /真实宽度
无功realheight; / /真正的高度
这里 / /做下,($)这里是创建一个临时的img标签,类似于JS来创建一个新的对象(图像)!
$()。Attr(src
*
如果你想得到图片的真实宽度和高度,你必须注意三点。
1,您需要在这里创建一个图像对象,如$( )。
2。指定图片的SRC路径
3,在加载图片完成后,它必须在加载()函数中执行。
* /
realwidth = this.width;
realheight = this.height;
如果TRUE宽度大于显示100%的浏览器的宽度
如果(realwidth > = _w){
$(IMG)。Css(宽
}
否则,如果它小于浏览器的宽度,则根据原始大小
$(IMG)。Css(宽
}
});
});


js模式

代码如下




在window.onload =函数(){
功能(getviewsize){ / /浏览器访问视口的宽度
返回{
W:窗口{ 'innerwidth} document.documentelement.clientwidth | |,
(H):窗口{ 'innerheight} document.documentelement.clientheight | |
}
}
功能(getfullsize){ / /浏览器访问的最大宽度
无功W = math.max(document.documentelement.clientwidth,文件体。clientwidth)+
math.max(document.documentelement.scrollleft,文件体。scrollLeft);
var H = math.max(document.documentelement.clientheight,文档。身体。自己)+
math.max(document.documentelement.scrolltop,文件体。scrollTop);
W = math.max(document.documentelement.scrollwidth,W);
H = math.max(document.documentelement.scrollheight,H);
返回{
w:w,
h:h
};
}
无功_sv_w = getviewsize(){W};
无功_sf_w = getfullsize(){W};
无功_w = _sv_w; / /这个视口的宽度,视情况而定
Var Imgarray = document.getelementsbytagname(IMG);
无功realwidth; / /真实宽度
无功realheight; / /真正的高度
对于(var i = 0;i < imgarray.length;i++){
无功imgtemp =新(图像); / /创建一个图像对象
imgtemp.src = imgarray {我},SRC;
imgtemp.index =我; / /指定检索值确定的图片
imgtemp.onload =功能({ / /)进行图像加载完毕
无功_stemp = / /本;指针的新变量的当前副本,否则将导致共享变量
realwidth = this.width;
realheight = this.height;
如果(realwidth > = _w)
{
imgarray { _stemp。指数}。style.width = _w + 'px;
imgarray { _stemp。指数}。style.height =汽车;
}
别的{
imgarray { _stemp。指数}。style.width = realwidth + 'px;
imgarray { _stemp。指数}。style.height = realheight + 'px;
}
}
}
}


在上面的两种方法中,jQuery更简单、更快、更复杂,但比jQuery更快!