javascript怎样获得图片的高度值和宽度值

楼上的代码只能获得一个被 img 标签定义的的显示高宽, 无法获得该的真正高度与宽度,

如, 有一幅图abcjpg, 宽高为 1024 / 768,

但是使用 <img src="abcjpg" id="img1" width="800" height="600" />

时你所看到的被压缩为 800 600,

使用你上面的代码得到的只是 800 与 600,

下面将使用另外一种方法获得的真实高宽

<script type="text/javascript">

<!--

var Img = new Image();

Imgsrc = documentgetElementById('img1')src;

alert('Width: ' + Imgwidth + '\nHeight: ' + ImgHeight);

//-->

</script>

可以在photoshop中查看一张的高度和宽度，方法如下：

1、首先打开PS软件，然后在PS中打开需要处理的。

2、接下来在上方工具栏中选择“图像”-“图像大小”。

3、接下来可以看到这张的大小为257M，宽度和高度分别为4516和2474厘米。

4、只需要高度和宽度栏中输入自己需要的，点击“确定”即可。

把动态的gif缩小尺寸步骤如下：

1、开启PS，打开一张gif。

2、执行图像——图像大小，快捷键alt+ctrl+I。

3、任意选择宽度或者是高度更改，勾选约束比例，保证按比例缩小或放大。

4、点击确定，执行文件——存储为web和设备所用格式，选择存储为gif格式，这样就将GIF照片缩小了。

在我们设计网页的时候，经常会遇到自适应问题，实际这些工作完全可以交给浏览器来完成就可以了，只可惜，无论是IE还是FIREFOX在自适应这个问题上都处理的不尽人意，网上实现网页宽度和高度的方法也很多，主要又两种：

第一种是使用CSS来完成；第二种是使用Javascript来完成，根据实际的应用效果来说，使用Javascript还是比较靠谱一点，因为CSS的expression的确有点烦，笔者是指使用效果上有点恼人，本文专门把这两种都总结一下，方便站长们参考使用。

一、使用CSS实现的自适应

使用CSS实现自适应很简单，主要靠两个参数来完成，分别是max-width和max-height，这两个参数在FIREFOX和IE7以上支持都很好，但是在IE6上面，效果非常糟糕，尤其是对于多张的显示，第一次显示网页大都很难达到自适应的效果，一般都是有些能自适应，有些不能自适应，多次刷新可能又显示OK，就是这点就足够烦人，而且一旦显示多张，IE6上就卡的要命（expression在IE上比较占用资源，感觉设计是用来玩得，FIREFOX自适应效果还是比较好，速度也非常快），反正笔者至今是没有找到更好的CSS方法来让IE6完美支持自适应。示例代码如下：

img{

max-width:128px;

max-height:128px;

height:auto;

zoom:expression(function(e){

if(ewidth>eheight){if(ewidth>128){eheight=eheight(128/ewidth);ewidth=128;}}

else{if(eheight>128){ewidth=ewidth(128/eheight);eheight=128;}}

estylezoom='1';}(this));

overflow:hidden;

}

上面代码格式上需要特别注意两点：

1、zoom属性里宽高赋值不能带单位（如px），否则无效；

2、if和else语句也必须带大括号括起来，单句指令也不行（而在很多编程语言里，单句指令可以无需大括号）；

二、使用Javascript实现的自适应

使用Javascript自适应相对来说比较方便，唯一的麻烦是就是在网页中需要对image预设置onload事件处理resize()函数，如果对于动态网页来说还好一点，反正是动态的，程序里加上去就OK了，可是如果对于很多篇文章而言，在里头增加onload函数有点麻烦，除非一次性的写个脚本批量处理，否则后期更改或替换起来还是比较麻烦，比如的可显示宽度变化等等。

另一方面如果把宽度值写在Javascript中，那么将带来程序的通用性降低，下面的示例不是写死的，已测试效果比起CSS要HAPPY的多，网上也又很多类似的例子，不是不完成就是中间还存在某些问题，本文的例子应该会更好一点，笔者对不同的尺寸下的的显示效果做过好几种测试了。示例如下：

//RESIZE自适应宽度和高度

//参数说明：

//obj是对象，this调用方法见下面示例

//maxW和maxH分别为约定的最大宽度和最大高度

functionresizeimg(obj,maxW,maxH)

{

varimgW=objwidth;

varimgH=objheight;

if(imgW>maxW||imgH>maxH)

{

varratioA=imgW/maxW;

varratioB=imgH/maxH;

if(ratioA>ratioB)

{

imgW=maxW;

imgH=maxW(imgH/imgW);

}

else

{

imgH=maxH;

imgW=maxH(imgW/imgH);

}

objwidth=imgW;

objheight=imgH;

}

}

我们在制定宽度和高度值的时候，一般宽度是肯定需要限定，而高度经常不需要限制，所以可以把高度指定的大一点，如果高度也限制，那么相当于制定一个imagebox，下面的程序或许对您很有用（不限制高度的忽略下面这个示例）。

当指定BOX的时候，一般都还需要在自适应之后显示在BOX容器的中间，也就是水平和垂直都需要居中。首先需要指定BOX容器的宽度和高度，然后可以使用CSS来控制显示效果，也可以使用Javascript控制显示效果。示例如下：

CSS显示方法如下：

#imgbox{text-align:center;vertical-align:middle;}

#imgboximg{vertical-align:middle;}

或使用Javascript完成：

在上文resizeimg()函数里最后只需要增加类似这样的语句，

objstylemargin-left=(800-imgW)/2;

objstylemargin-top=(800-imgH)/2;

即可，当然了，您总不能让resize尺寸本来就超出BOX容器尺寸吧，否则就把容器撑大，style风格肯定就对不上了。

用的宽度/容器宽度的高度/容器高度这里得到两个值所有的限定范围都是可以根据俄这两个值来得到。你的需求之需要比较一下这两个值取其中较大一个值同时赋予的_scaleX _scaleY

ImageView的LayoutParam都设置为wrap_content并设置 android:scaleType="matrix"代码里创建MatrixMatrix matrix = new Matrix();Matrix matrix = new Matrix();matrixpostScale(05f, 1f);//宽缩小到50%，高度不变imgsetImageMatrix(matrix);

<%

'/////获取ShowImgasp的绝对路径/////

Dim curFile

curFile=Servermappath(Requestservervariables("PATH_INFO"))

Dim curfilename,filename

'/////相对路径（存于数据库中）

cufilename=rs("ImgURL")

'/////因为ShowImgasp与images在同一目录，所以我们用instrrev获取images的路径/////

filename=left(curFile,instrrev(curFile,"\"))&cufilename

'/////建立GPS类实体/////

Dim GetPicSize

Set GetPicSize=new GPS

Set fs=ServerCreateObject("ScriptingFileSystemObject")

'/////获取类型/////

Dim PicSuffixName

PicSuffixName=fsGetExtensionName(filename)

Dim PD '//Picture Dimension

Dim PWidth,PHeight

Select Case PicSuffixName

Case "gif","bmp","jpg","png":

'/////调用GPS通用类中的GetImageSize函数获取尺寸/////

PD=GetPicSizeGetImageSize(filename)

PWidth=PD(1) '//获取宽度

PHeight=PD(2) '//获取高度

Case "swf"

PD=GetPicSizeGetImageSize(filename)

PWidth=PD(1) '//获取Flash宽度

PHeight=PD(2) '//获取Flash高度

Case Else

End Select

Set fs=Nothing

Set GetPicSize=Nothing

%>

以上就是关于javascript怎样获得图片的高度值和宽度值全部的内容，包括:javascript怎样获得图片的高度值和宽度值、怎么看出一张图片的高度和宽度、怎样修改动态图片的尺寸GIF等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！