固定大小容器內,不同比例的圖片高度撐滿,寬度居中裁剪
阿新 • • 發佈:2017-08-18
logs pos -i borde 同比 最終 分享 1-58 不定
在一個商品展示列表中,一個需求是在一個正方形的方塊中,按原比例展示商品圖片,但是圖片比例不定,需要居中顯示,高度撐滿,寬度多余的隱藏。
結構:
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
最終結果:
圖片被居中顯示,高度撐滿,並兩邊裁剪掉了多余的寬度。
固定大小容器內,不同比例的圖片高度撐滿,寬度居中裁剪