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

如何用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)函数有三个参数,第一个就不用说了吧,每二个参数是说图片的最大宽度,第三个参数是表示图片的最大高度当图片的宽高任一个大于参数里设置的值的时候,图片就会等比例缩小,且位置相对于外面的容器左右居中多的不说了,你懂的~~~

<div style="max-height:500pxoverflow:auto"></div>

max-height是最大高度,除了ie6不支持,需要使用js外,其他ie7+,ff,chrome都支持,符合你的要求

也可以用纯js

<div id="test" style="overflow:auto"></div>

<script>

var 最大高度 = 300

function a(){

if($('#test')[0].offsetHeight >最大高度) $('#test').height(最大高度)

}//你怎么调用a()就看你的了

</script>

document.getElementById("id").style只能修改页面上的css属性 不能修改css文件中的属性

js不能直接修改样式表,不过可以通过添加或者删除类达到控制样式的效果


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11894021.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存