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

Question

父容器 div.wrapper 是1:1的正方形，如果图片宽高比大于1的话，就撑不起来，就会像图中一样，该怎样才能让宽高比不同的图片都能在父容器的中心显示呢

Answer 1

疯狂上岸 2020-01-22 21:52:11

.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%

Answer 2

提问者 weixin_慕UI5568240 2019-10-22 11:02:40

已经解决了，swiper-slide里面不装img而是装一个div，让这个div撑满 div.wrapper容器，再用background-image:url()把图片用作背景再设置：

background-size: contain
background-repeat: no-repeat
background-position: center

就行了就能保证图片宽高比大于1也能显示在垂直中心了

• 蓝色的沙漏 #1

  能截个图吗 搞不好啊