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="图片" onload="javascript:DrawImage(this, 200, 200)">
//-->
</script>
2:让图片水平和垂直居中显示
首先,图片需要被包含在如下所示的节点对象中:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
<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的样式表如下:
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
.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)" />
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
* 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)" />