图片等比例缩放居中放置

最新推荐文章于 2022-09-03 21:45:35 发布

云曦沥雨

最新推荐文章于 2022-09-03 21:45:35 发布

阅读量1.3k

点赞数

分类专栏： HTML4 CSS2

本文链接：https://blog.csdn.net/itcalf/article/details/17383157

版权

HTML4 CSS2 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、需要用到的JS:

<script type="text/javascript">
var 
  flag=false;
function  DrawImage(ImgD,iwidth,iheight)
{
   var  image=new   Image();
   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;
          }
       }else{
         if(image.height>iheight){
            ImgD.height=iheight;
            ImgD.width=(image.width*iheight)/image.height;
          }else{
            ImgD.width=image.width;
            ImgD.height=image.height;
          }
       }
    }
}
</script>

2、在每个图像上写上：

<img src="../images/001.jpg" width="138"height="138" οnlοad="javascript:DrawImage(this,138,138)"/>

以上步骤操作完成后图片就会等比例缩放了。

让图片在div中进行垂直和水平居中

实例：

<div class="zuopintu"><ahref="#"><img src="../images/001.jpg" width="138" height="138" οnlοad="javascript:DrawImage(this,138,138)"/></a></div>

对zuopintu 做的样式如下：

.zuopintu{
width:138px;
height:129px;

display: table-cell;
vertical-align:middle;

text-align:center;


*display: block;
*font-size: 112px;
*font-family:Arial;
}