图片宽高比不一样导致图片不在垂直中心
来源:9-2 Vue项目详情页 - 公用图片画廊组件拆分
weixin_慕UI5568240
2019-10-21
父容器 div.wrapper 是1:1的正方形,如果图片宽高比大于1的话,就撑不起来,就会像图中一样,该怎样才能让宽高比不同的图片都能在父容器的中心显示呢
写回答
2回答
-
疯狂上岸
2020-01-22
.wrapper
overflow: hidden
display: table
text-align: center
height: 0
width: 100%
//padding-bottom: 100%
.gallary-img
display: table-cell
vertical-align: center
width: 100%
10 -
weixin_慕UI5568240
提问者
2019-10-22
已经解决了,swiper-slide里面不装img而是装一个div,让这个div撑满 div.wrapper容器,再用background-image:url()把图片用作背景再设置:
background-size: contain
background-repeat: no-repeat
background-position: center就行了就能保证图片宽高比大于1也能显示在垂直中心了
112019-11-01
相似问题
图片高度不固定
回答 1
老师我有个问题不明白,急
回答 1