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%);
}