固定大小容器内,不同比例的图片高度撑满,宽度居中裁剪
2017-08-18 14:50
1926 查看
在一个商品展示列表中,一个需求是在一个正方形的方块中,按原比例展示商品图片,但是图片比例不定,需要居中显示,高度撑满,宽度多余的隐藏。
结构:
imgOuter是固定容器,宽高都是120px;
CSS代码:
img居中显示的CSS,由于宽度不定,所以使用了transfrom的translate,思路来源于网上的某个文章,但是找不到出处了:
需要注意imgOuter中的z-index:1,在img上使用transform后,imgOuter如果不设置z-index,那么它的overflow:hidden将会失效。来源于:
KevinYue----https://segmentfault.com/q/1010000005174964/a-1020000005175107
最终结果:
图片被居中显示,高度撑满,并两边裁剪掉了多余的宽度。
结构:
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
最终结果:
图片被居中显示,高度撑满,并两边裁剪掉了多余的宽度。
相关文章推荐
- 固定容器内-未知大小图片-垂直居中等比例显示
- Android 自定义imageview图片高度固定大小宽度按比例自适应
- Android 自定义imageview 图片宽度固定大小高度按比例自适应
- Android 自定义imageview 图片高度固定大小宽度按比例自适应
- css-使不同大小的图片在固定大小的容器中居中
- 固定div容器的宽高,图片居中(图片不限制大小)
- android 根据固定的宽度或高度等比例缩放图片
- css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)
- 【web布局】多个高度一致的子元素按各自宽度比例铺满容器,自适应窗口大小
- 固定宽度 高度的页面在不同分辨率的屏幕上垂直 水平居中
- 未知尺寸图片在固定高度容器中的水平和垂直居中
- imageview如何固定宽度(例如都是320),而高度随真实图片的比例来设定
- 任意大小的图片垂直水平居中与一个固定大小的容器中
- android创建固定宽度,高度的图片,比例缩放
- ImagView宽度固定,高度根据控件宽度与图片宽度比例进行自适应
- 任意大小的图片在固定容器居中显示
- 一个可以使得上传的图片大小按照指定的宽度,高度自动按比例进行缩放的函数(C#)
- 方形图片,高度铺满,宽度居中裁剪
- 图片在固定大小容器中等比居中显示
- 【居中系列】大小不固定的图片在固定容器中的水平垂直居中