图片高度宽度代码（图片高度宽度代码怎么弄）

今天给各位分享图片高度宽度代码的知识，其中也会对图片高度宽度代码怎么弄进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、如何编写html代码控制图片显示的大小？
• 2、论坛代码中图片宽度高度设置的js问题
• 3、Js获取图片原始宽高的实现代码

如何编写html代码控制图片显示的大小？

具体操作步骤如下：

1、首先新建一个HTML页面，这里命名为“new_file.html”

2、接着给标签设置背景图片，例如设置的是body标签。

3、接着新建一个css文件，如图，命名为“1.css”

4、这里给body标签设置background-size属性，如果标签是div就写div，然后可以设置宽度和高度。

5、如图所示，在new_file.html里面写上这个：link href="css/1.css" type="text/css" rel="stylesheet"/就可以设置背景图片的大小了。

论坛代码中图片宽度高度设置的js问题

如果仅仅是要自动改大小的话，代码如下:

首先需要给自动改尺寸的img标签添加onload='imgAutoresize(this)'属性，然后代码包含以下:

function

imgAutoresize(o){

if(o.width

700

){

var

iwidth

=

o.width;

var

iheight

=

o.height;

o.style.width

=

'700px';

o.style.height

=

(iheight/iwidth)*700+'px';

}

}

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

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

//获取图片原始宽度

function

getNaturalWidthAndHeight(img)

{

var

image

=

new

Image();

image.src

=

img.src;

return

[image.width,image.height];

}

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

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

$(".tz_main_box

pimg").each(function

(k,

v)

{

$(this).unbind("click");

//解除绑定，防止弹出多次图片层。

$(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;

}

//layer弹出层插件

layer.open({

type:

1,

title:

false,

closeBtn:

0,

area:

[''+layerWidth+'px',

''

+

layerHeight

+

'px'],

skin:

'layui-layer-nobg',

//没有背景色

shadeClose:

true,

closeBtn:

1,

//显示关闭按钮

content:

"centerimg

src='"

+

$(this).attr("src")

+

"'/center"

});

});

});

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

图片高度宽度代码的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于图片高度宽度代码怎么弄、图片高度宽度代码的信息别忘了在本站进行查找喔。