本文目录一览

1，怎么用js实现图片的缩小

写 function得时候设定width,Height参数

怎么用js实现图片的缩小

2，如何利用JS或者CSS样式来自动调整图片大小

js版和css版自动按比例调整图片大小方法，分别如下：<title>javascript图片大小处理函数</title><script language=Javascript>var proMaxHeight = 150;var proMaxWidth = 110;function proDownImage(ImgD) var image=new Image(); image.src=ImgD.src; if(image.width>0 && image.height>0) var rate = (proMaxWidth/image.width < proMaxHeight/image.height)?proMaxWidth/image.width:proMaxHeight/image.height; if(rate <= 1) ImgD.width = image.width*rate; ImgD.height =image.height*rate; } else ImgD.width = image.width; ImgD.height =image.height; } }}</script></head><body><img src="999.jpg" border=0 width="150" height="110" onl oad=proDownImage(this); /><img src="room.jpg" border=0 width="150" height="110" onl oad=proDownImage(this); /></body>纯css的防止图片撑破页面的代码，图片会自动按比例缩小：<style type="text/css">.content-width .content-width img</style><div class="content-width"> <p><img src="/down/js/images/12567247980.jpg"/></p> <p><img src="/down/js/images/12567247981.jpg"/></p></div>
这个使用CSS可以控制，一般看你的图片是哪种比例的，如果不想图片变形的话，只设置宽或者高，如：img这样的结果是，图片本身的大小并没有改变，但这个img标签显示出来的图片是被压缩显示的。利用JS来调整的原理是：获得图片的宽和高，然后去与父容器的宽高相比，取比例大的来父容器值对img进行样式设置，比如：图片宽/父容器宽 = 3， 图片高/父容器高 = 2，那么取父容器的宽，把这个值通过JS设置给img标签。
<div class="body"><dl class="e2e2e2"><dt><a class="" title="草甘膦" href="#"><img alt="草甘膦" src="images/2.jpg"/></a></dt><dd class="textcenter"><strong><a target="_blank" href="#">草甘膦</a></strong></dd></dl> 这段代码怎么办呢，我是直接把<img alt="草甘膦" src="images/2.jpg"/>从数据库里提取出来啊，上传图片时也是直接把<img alt="草甘膦" src="images/2.jpg"/>写进去的，没办法弄这段代码啊
2楼的能够解决CSS控制图片尺寸的问题，但是还不够灵活，我在他的基础上补充一下，可以这样，如果你的图片的最大宽度不能超过600只要在CSS里面加句就可以#content img{max-width:600px;}

如何利用JS或者CSS样式来自动调整图片大小


文章TAG：怎么  放大  缩小  图片  怎么用js放大缩小图片  
下一篇