图片在容器充满居中显示
Posted 雨中的鱼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了图片在容器充满居中显示相关的知识，希望对你有一定的参考价值。
效果图： 
源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片在容器充满居中显示</title>
<style type="text/css">
.container{
width: 100px;
height: 100px;
overflow: hidden;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="container">
<img src="image/2.jpg" />
</div>
<div class="container" style="width: 200px;">
<img src="image/2.jpg" />
</div>
<script type="text/javascript">
function fitImage(objDiv, objImg) {
var divWidth = objDiv.offsetWidth; //容器的宽
var divHeight = objDiv.offsetHeight; //容器的高
var imgWidth = objImg.width; //图片的宽
var imgHeight = objImg.height; //图片的高
var imgScale = ‘‘; //图片缩放倍数
var divRatio = (divWidth / divHeight); //容器宽高比
var imgRatio = (imgWidth / imgHeight); //图片宽高比
if(divRatio >= imgRatio){
imgScale = divWidth / imgWidth;
}else{
imgScale = divHeight / imgHeight;
}
objImg.style.width = (imgWidth * imgScale) + ‘px‘;
objImg.style.height = (imgHeight * imgScale) + ‘px‘;
objImg.style.marginLeft = (divWidth - objImg.width) / 2 + ‘px‘;
objImg.style.marginTop = (divHeight - objImg.height) / 2 + ‘px‘;
}
</script>
</body>
</html>
以上是关于图片在容器充满居中显示的主要内容，如果未能解决你的问题，请参考以下文章