js按比例缩放图片且垂直居中显示图片
程序员文章站
2022-07-08 19:23:09
...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>图片居中显示</title>
<style>
.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;}
</style>
<script>
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;
}
}
}
/**
* 让图片垂直居中。使用前提：当前图片必须被包含在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";
}
}
</script>
</head>
<body>
<p>①用css控制 结合drawImage方法 按比例缩放图片<p>
<p>②用centerImage 结合drawImage方法 实现水平和垂直居中<p>
<p>
<b>说明：</b>
（1）图片必须套在div>ul>li>div中，其中li下面可以添加a节点；
（2）离图片最近的父节点必须是div，让图片水平和垂直居中显示，可全靠这个div了。
这里centerImage让图片居中显示的原理是：设置包含图片的div的style.marginTop和style.marginLeft属性，来间接安排图片的位置，
</p>
<p>作者：selina ,个人网址：http://if-dream.iteye.com/ ,邮箱：hesai.guang@qq.com<p>
<!-- html代码 按比例缩放图片-->
<div class="home_photo">
<ul>
<li class="home_photo_pic">
<div>
<img src="04.jpg" onLoad="drawImage(this, 157, 157);"/>
</div>
</li>
</ul>
</div>
<!-- html代码-->
<br/>
<br/>
<!-- html代码 按比例缩放图片且垂直居中-->
<div class="home_photo">
<ul>
<li class="home_photo_pic">
<div>
<img src="04.jpg" onLoad="drawImage(this, 157, 157);centerImage(this, 157, 157);"/>
</div>
</li>
</ul>
</div>
<!-- html代码-->
</body>
</html>
提供附件，可下载！
上一篇： CSS 完美简易华丽的垂直居中