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

結(jié)構(gòu)：

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，思路來源于網(wǎng)上的某個(gè)文章，但是找不到出處了：

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

需要注意imgOuter中的z-index:1，在img上使用transform后，imgOuter如果不設(shè)置z-index，那么它的overflow：hidden將會失效。來源于：

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

最終結(jié)果：

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

總結(jié)

以上是生活随笔為你收集整理的固定大小容器内，不同比例的图片高度撑满，宽度居中裁剪的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。