图片水平垂直居中

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标签 水平居中 垂直居中 和水平垂直居中

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

HTML CSS中如何实现DIV中的图片水平垂直居中对齐

图片垂直水平居中

网页元素居中攻略记_图片水平垂直居中

图片水平垂直居中的四种方法