在一個商品展示列表中，一個需求是在一個正方形的方塊中，按原比例展示商品圖片，但是圖片比例不定，需要居中顯示，高度撐滿，寬度多余的隱藏。

結構：

imgOuter是固定容器，寬高都是120px；

CSS代碼：

.imgOuter{
  width: 120px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  border: 1Px solid #d7d7d7;
  position: relative;
  z-index: 1;
}

img居中顯示的CSS，由於寬度不定，所以使用了transfrom的translate，思路來源於網上的某個文章，但是找不到出處了：

.imgWH{
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

需要註意imgOuter中的z-index:1，在img上使用transform後，imgOuter如果不設置z-index，那麽它的overflow：hidden將會失效。來源於：

KevinYue----https://segmentfault.com/q/1010000005174964/a-1020000005175107

最終結果：

圖片被居中顯示，高度撐滿，並兩邊裁剪掉了多余的寬度。

固定大小容器內，不同比例的圖片高度撐滿，寬度居中裁剪