等比例缩放图片 js

文章是抄来的，还没在项目中尝试，先存再说：

--文章中的方法用过了,不过在现在的项目中判断长宽比的条件取反后才好使的.

现在的博客很多都会在归档页显示一个文章的缩略图，有的是调用文章中的图片，有的是添加的特色图片，不过我相信大多数都是调用文章中的图片，----因为都很懒
不过，归档页的图片都会限定大小，最普遍的做法(我也是)都是直接给图片申明大小，硬生生的把图片缩小，这样做的后果就是图片变形、变模糊。要想图片缩小后不变模糊，只能是等比例缩放，这样又有个问题。。。比如我们首页需要显示一个一个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. }