文章是抄来的,还没在项目中尝试,先存再说: --文章中的方法用过了,不过在现在的项目中判断长宽比的条件取反后才好使的. 现在的博客很多都会在归档页显示一个文章的缩略图,有的是调用文章中的图片,有的是添加的特色图片,不过我相信大多数都是调用文章中的图片,----因为都很懒 不过,归档页的图片都会限定大小,最普遍的做法(我也是)都是直接给图片申明大小,硬生生的把图片缩小,这样做的后果就是图片变形、变模糊。要想图片缩小后不变模糊,只能是等比例缩放,这样又有个问题。。。比如我们首页需要显示一个一个150×150的正方形缩略图片,但是我们文章中的图片是长方形的。。。等比例缩放之后还是长方形的。。这这这。。。。 先不管,先看图片等比缩放方法: 一、缩放所需要的js代码 1. <script language="javascript" type="text/javascript"> 2. //定义一个函数imgscale 参数:图片对象、图片预想的宽度、图片预想的高度 3. function imgscale(ImgD,FitWidth,FitHeight){ 4. var image = new Image(); 5. image.src = ImgD.src; 6. //比较 (实际图片的长宽比) 和 (预想的长宽比) 7. if(image.width>0 && image.height>0) { 8. //如果图片相对更胖 9. if(image.width/image.height >= FitWidth/FitHeight) { 10. //让图片的高达到预想的 11. ImgD.height = FitHeight; 12. //图片的宽按比例 13. ImgD.width = (image.width*FitHeight)/image.height; 14. } else { 15. //如果更扁 16. ImgD.width = FitWidth; 17. ImgD.height = (image.height*FitWidth)/image.width; 18. } 19. } 20. } 21. //--> 22. </script> 将上面给出的js代码放在网页头部,注意这个还是放网页头部的好,如果放在网页底部,用IE调试会出现imgscale未定义。 然后给图片的html代码加上执行这个函数: 1. <img href="xx/xx.jpg" title="图片缩放" width="150"; height="150" οnlοad="javascript:imgscale(this,150,150)" /> 2. //图片加载后执行imgscale函数,前面给定width和height是为了让图片在加载过程中也是这么大,不会影响最终效果 图片缩放后会出现两种情况:一、假设图片缩小后是更胖、比如200×150,这样水平方向会多出50个像素。。 二、假设图片缩小后是更瘦、比如150×250,这样竖直方向又多出100像素。。。 解决方法就是给图片加个div(也可以在原有div上操作),给这个div的css类添加overflow: hidden;width:150px;height:150px;属性,这个css属性给div限定大小,超出部分隐藏。 比如: 1. <div class="imgdiv"> 2. <img href="xx/xx.jpg" title="图片缩放" width="150"; height="150" οnlοad="javascript:imgscale(this,150,150)" /> 3. </div> 它的css: 1. <!--它的css如下--> 2. .imgdiv{ 3. width:150px; 4. height:150px; 5. overflow: hidden; 6. }