图片水平垂直居中
Posted 四国诸葛不亮
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了图片水平垂直居中相关的知识,希望对你有一定的参考价值。
html:
<div class="imgbox">
<img src="" />
</div>
图片在盒子中垂直居中
css:
.imgbox{
height:100px;
width:100px;
display:table-cell;
vertical-align:middle;
text-align:center;
padding:5px;
border:1px solid #ccc;
}
.imgbox img{
max-height:100%;
max-width:100%;
}
效果图如下:
图片在盒子中填充的两种方式(红色的标注表示两种方式的不同之处)
第一种方式:保持图片原始比例,等比缩放填满,高和宽至少有一个和盒子相同,超出盒子的部分不可见。
css:
.imgbox{
height:100px;
width:100px;
padding:5px;
}
.imgbox img{
width: 100%;
height: 100%;
object-fit: cover;
}
效果图如下:
这个是我想要的效果,可惜目前,IE浏览器并不支持object-fit
第二种方式:保持图片原始比例,等比缩放填满,高和宽都可以超出盒子,超出盒子的部分不可见。显示图片的中心位置。
css:
.imgbox{
height:100px;
width:100px;
padding:5px;
overflow: hidden;
position: relative;
}
.imgbox img{
position:absolute;
top:50%;
left:50%;
min-width:100%;
min-width:100%;
transform:translate(-50%,-50%);
}
效果图如下:
发现padding的效果没有表现出来。
以上是关于图片水平垂直居中的主要内容,如果未能解决你的问题,请参考以下文章
css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中