如何用js控制图片的图大宽度或是最大高度

JavaScript026

如何用js控制图片的图大宽度或是最大高度,第1张

这是很多网页前端设计者都面临的一个问题,今天通过收集整理,把我常用的方法贴出来,希望能对需要的同行朋友有点帮助~~首称贴一段js代码:<script type="text/javascript">var Image = {}function SetMiddle(image, height){/// <summary>重设图片大小后让图片相对于DIV居中</summary>if (typeof(image) == 'string') image = document.images[image] || document.getElementById(image)var div = image.parentNodeif(div.nodeName != "DIV"){div = div.parentNode}if(image.height >0 &&image.height <height){var marginTopVal= (height - image.height) / 2image.style.marginTop =parseInt(marginTopVal)+"px"///不加px,在火狐下不支持!}else{image.height = heightimage.style.marginTop = "0px"}}Image.Resize1=function(image,width,height){if(width==null||height==null)returnimage.removeAttribute('width')image.removeAttribute('height')var w = image.width, h = image.heightvar scalingW=w/width,scalingH=h/heightvar scaling = w / hif(scalingW>=scalingH){image.width=widthimage.height = width / scaling}else{image.height=heightimage.width = height*scaling}}function imgReSize(imgObj,w,h){Image.Resize1(imgObj,w,h)SetMiddle(imgObj,h)}</script>下面是具体的图片调用js函数的方法:onload=imgReSize(this,628,452)函数有三个参数,第一个就不用说了吧,每二个参数是说图片的最大宽度,第三个参数是表示图片的最大高度当图片的宽高任一个大于参数里设置的值的时候,图片就会等比例缩小,且位置相对于外面的容器左右居中多的不说了,你懂的~~~

这种情况用CSS来控制最合适。例如你想让初始图片显示为100px*100px,则:

<img src="images/pic.png" width="100" height="100" />

或者:

<img src="images/pic.png" style="width:100pxheight:100px" />

当页面中图片非常多,且要求每张图片的大小依据其父容器来固定怎么办?可以使用max-weight:

img {max-weight:100%}

这样图片会自动缩放到和其父容器等宽。

不用那么复杂,document.getElementById("show").getElementsByTagName("img")我没见过这么写的,而且如果你的JS在头部执行那IMG和DIV可能有加载顺序问题,你一定获得不到。

直接在IMG标签的onload事件判断一下就可以了

<img src="xx.jpg" onload="if(this.width >600) this.width = 600" />