js结合css实现图片自动等比例缩小且垂直居中的代码

发布时间:2020-04-18编辑:脚本学堂
本文介绍下,使用js与css实现图片自动等比例缩小,并垂直居中的代码。有需要的朋友,参考下吧。

js、css实现图片的自动等比例缩小,并垂直居中显示。
代码如下:
 

复制代码 代码示例:
<script type="text/javascript">
<!--
var flag=false;
//图片等比例缩小
function DrawImage(ImgD){
var image=new Image();
var iwidth = 450;
var iheight = 400; //定义允许高度,当宽度大于这个值时等比例缩小
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;
   }
}
}
}
//调用:<img src="图片" onload="javascript:DrawImage(this)">
//-->
</script>