JS等比例缩放图片以及让图片水平垂直居中显示

　　1：在客户端等比例缩放图片

<script language="JavaScript">
<!--
//等比例缩放图片
 var flag=false;
 /**
   * ImgD：原图
   * maxWidth：允许的最大宽度
   * maxHeight：允许的最大高度
   */
 function DrawImage(ImgD, maxWidth, maxHeight){
  var image=new Image();
  var iwidth = maxWidth; //定义允许图片宽度
  var iheight = maxHeight; //定义允许图片高度
  image.src=ImgD.src;
  if(image.width>0 && image.height>0){
   flag=true;
   if(image.width/image.height>= iwidth/iheight){
    if(image.width>iwidth){
     ImgD.width=iwidth;
     ImgD.height=(image.height*iwidth)/image.width;
    }else{
     ImgD.width=image.width;
     ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
   } else{
    if(image.height>iheight){
     ImgD.height=iheight;
     ImgD.width=(image.width*iheight)/image.height;
    }else{
     ImgD.width=image.width;
     ImgD.height=image.height;
    }
    ImgD.alt=image.width+"×"+image.height;
   }
  }
 }
//调用：<img src="图片" οnlοad="javascript:DrawImage(this, 200, 200)">
//-->
</script>

 

　　2：让图片水平和垂直居中显示

　　首先，图片需要被包含在如下所示的节点对象中：　　

代码

      < div class = " home_photo " >
         < ul >
           < li class = " home_photo_pic " >
         < a href = " picture_view.asp?id=3 " >
               < div >
                 < img src = " ../admin/pictureAccount/uploadedPics/lyf.jpg "  onload = " javascript:centerImage(this, 157, 157) "   / >
             < / div>
         < / a>
       < / li>
           < li class = " home_photo_info orange " >
         < a href = " picture_view.asp?id=3 " > 枫叶 < / a>
       < / li>
           < li class = " home_photo_info " > 作者: < span class = " STYLE1 " > 枫叶 < / span>< / li >
         < / ul>
       < / div>

 

　　div、ul、li的样式表如下：　　

代码

.home_photo {  width : 165px ;  height : 230px ; margin-right : 17px ; margin-left : 10px ;  float : left ;  margin-top : 20px ;  display : inline ; }
.home_photo ul {  padding : 0 ;  margin : 0 ; }
.home_photo_pic {  width : 157px ;  height : 157px ;  border : 1px solid #ccc ;  background : #eaeaea ; padding : 3px ; }
.home_photo_info {  text-align : center ;  margin-top : 10px ; }

 

　　其实上面一大段东西都不重要，重要的只有两点：

　　（1）图片必须套在<div class="home_photo"><ul><li><div>中，其中<li>下面可以添加<a></a>节点；

　　（2）离图片最近的父节点必须是<div>，让图片水平和垂直居中显示，可全靠这个<div>了。

　　

　　这里让图片居中显示的原理是：设置包含图片的div的style.marginTop和style.marginLeft属性，来间接安排图片的

位置，当然，这些工作都要依靠js来完成，因为，经过本人大量的调查，并没有发现单纯依靠css样式就可以实现图片居中

显示的效果。js代码如下：

　　<img src="../admin/pictureAccount/uploadedPics/lyf.jpg" onload="javascript:DrawImage(this, 157, 157); centerImage(this, 157, 157)" />

代码

         /* * 让图片垂直居中。使用前提：当前图片必须被包含在div中
      * ImgD：原图
      * maxWidth：允许的最大宽度(即包含本图片的div的父节点对象的宽度，一般是li)
      * maxHeight：允许的最大高度
       */
     function  centerImage(imgD, maxWidth, maxHeight){
         var  div  =  imgD.parentNode; // 获取包含本图片的div
         if (imgD.height  <  maxHeight){
             var  top  =  (maxHeight  -  imgD.height)  /   2 ;
            div.style.marginTop  =  top  +   " px " ;
        }
         if (imgD.width  <  maxWidth){
             var  left  =  (maxWidth  -  imgD.width)  /   2 ;
            div.style.marginLeft  =  left  +   " px " ;
        }
    }

 

　　注：函数centerImage()中的参数maxWidth和maxHeight，一般就是<li></li>的width和height。

 

　　3：在web客户端同时等比例缩放图片和让图片居中显示

　　上面分别等比例缩放了图片，并让图片居中显示。如果要在web客户端同时做到这两点，则在img的onload事件中同时调用

上面的两个函数DrawImage()和centerImage()，但是要注意调用顺序：必须先调用DrawImage()函数，代码如下所示：

　　<img src="../admin/pictureAccount/uploadedPics/lyf.jpg" onload="javascript:DrawImage(this, 157, 157); centerImage(this, 157, 157)" />