js按比例缩放图片且垂直居中显示图片

最新推荐文章于 2021-06-03 17:08:20 发布

iteye_19372

最新推荐文章于 2021-06-03 17:08:20 发布

阅读量214

点赞数

分类专栏： @Ajax 文章标签：比例缩放垂直居中图片不变形

本文链接：https://blog.csdn.net/iteye_19372/article/details/82488000

版权

@Ajax 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

<!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>

提供附件，可下载！

iteye_19372

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js按比例缩放图片且垂直居中显示图片

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html;
复制链接

扫一扫