swipper图片高度不一致时，无法垂直居中

来源：9-2 Vue项目详情页 - 公用图片画廊组件拆分

ellydebug

2018-06-20

打扰了，老师。当swipper中的图片高度不一致时，会以高度最大的图片为准，做垂直居中；而高度较小的会距离bottom较大。如何解决呢？

<style lang="stylus" scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #000;
}
  .wrapper {
    overflow: hidden;
    width: 100%;
  }
    .gallery-img {
      width: 100%;
    }
</style>

写回答

2回答

欣欣人家爱

2018-07-05

.container >>> .swiper-wrapper
 display flex
 align-items center
 可以解决。
 
 另外swiper整体不会屏幕居中或者有竖图显示会有问题.
 .wrapper
   width 100%
 /*height 0*/
 /*padding-bottom 100%*/
 /*overflow hidden*/
 注释掉如上代码即可
前端小白刚学到这一章，浅解..

AmourLuoTongZhou

你怎么这么优秀，解决了

2018-07-12

共1条回复