如下图所示

代码：

<template>

  <div class="container">

    <div class="wrapper">

      <swiper>

        <swiper-slide>

          <img class="gallary-img" src="//img1.qunarzz.com/sight/p0/1412/be/c788f0f3767d2ea037b9b66d2010bfa4.water.jpg_r_800x800_2ddc6f15.jpg" />

        </swiper-slide>

        <!-- <div class="swiper-pagination"  slot="pagination"></div> -->

      </swiper>

    </div>

  </div>

</template>

<script>

export default {

  name: 'CommonGallary'

}

</script>

<style socped>

  .container

    display: flex

    flex-direction: column

    justify-content: center

    z-index: 99

    position: fixed

    left: 0

    right: 0

    top: 0

    bottom: 0

    background: #000

    .wrapper

      overflow: hidden

      height: 0

      width: 100%

      padding-bottom: 100%

      .gallary-img

        width: 100%

</style>