图片宽高比不一样导致图片不在垂直中心

来源: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%


1
0

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也能显示在垂直中心了

1
1
蓝色的沙漏
能截个图吗 搞不好啊
2019-11-01
共1条回复

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代,企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程