Js获取图片原始宽高的实现代码

如果我们页面看到的都是缩略图，那就需要做个点击放大效果，那么怎样获取的原始宽高呢？方法如下：

//获取原始宽度

function

getNaturalWidthAndHeight(img)

{

var

image

=

new

Image();

imagesrc

=

imgsrc;

return

[imagewidth,imageheight];

}

//点击缩略图d出层，显示原始。

//获取class为tz_main_box下的所有p标签下的img

$("tz_main_box

p>img")each(function

(k,

v)

{

$(this)unbind("click");

//解除绑定，防止d出多次层。

$(this)click(function

()

{

var

img

=

v;

//对象

var

imgArea

=

getNaturalWidthAndHeight(img);

var

layerWidth

=

imgArea[0]+

5;

if

(layerWidth

>

1080)

{

layerWidth

=

1080;

}

var

layerHeight

=

imgArea[1]

+

5;

if

(layerHeight

>

600)

{

layerHeight

=

600;

}

//layerd出层插件

layeropen({

type:

1,

title:

false,

closeBtn:

0,

area:

[''+layerWidth+'px',

''

+

layerHeight

+

'px'],

skin:

'layui-layer-nobg',

//没有背景色

shadeClose:

true,

closeBtn:

1,

//显示关闭按钮

content:

"<center><img

src='"

+

$(this)attr("src")

+

"'></center>"

});

});

});

以上这篇Js获取原始宽高的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

代码大致如下供参考：

var image=new Image();

imagesrc=//你的背景的src;

var divelement = documentgetElementById(你的div的id);

divelementstyleheight=(imageheightdivelementoffsetWidth)/imagewidth + "px";

几个需要注意的地方是imagesrc=xxx后需要等待直到下载完成。但是如果这个脚本是在你的div已经初始化好之后调用的话，那么已经被下载过了，所以直接进行后面的就好。另外以styleheight来设置高度的话后面需要加单位，比如px

以上就是关于Js获取图片原始宽高的实现代码全部的内容，包括:Js获取图片原始宽高的实现代码、js获取背景图片宽高比后根据浏览器宽度动态赋值div.style.height、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！