CSS：标签的图片同比缩放，并居中对齐，隐藏超出部分

 

效果如图：

 

解析：

结构共为2层，父级固定宽高，子级图片高度100%，宽度可不设，让其自动适应。通过子绝父相，再将子级以自身位置为中心点，使用  transform: translate(-50%, -50%);   向上向左移位自身的一半 ，达到水平垂直居中的效果。

其效果类型背景图片的：background-size:cover;  ，即图片若能等比缩放放在父容器中，则图片完整不变形的情况显示，若图片宽度或高度等比缩放后，并不合适，则居中对齐后，若超出，则通过父容器的 overflow:hidden; 将多余部分隐藏（即裁切）。

具体可参照以下源码。

 

html:

<div class="user-img">
     <img src="../../image/face/Boy.jpg" alt="" id="userImg" />
</div>

 

　

css:

.user-img {
  min-width: 120px;
  max-width: 120px;
  height: 100%;
  overflow: hidden;
  margin-right: 10px;
  position: relative;
}

.user-img img {
  height: 100%;
  display: inline-block;
  /* 以下为图片能居中的主要代码，需父级user-img相对定位 position:relative; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}