学步园

　　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="图片" onload="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)" />