手机宽高比自适应

解决当图片在上文字在下刚进页面文字先刷出来，随后图片刷出来文字会抖动问题

<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <swiper-slide v-for="swiperList of swiperLists" :key="swiperList.id">
                <img class="swiper-img" :src='swiperList.imgUrl'>
            </swiper-slide>
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>

<script>
export default{
  name: 'HomeSwiper',
  data () {
    return {
      swiperOption: {
        pagination: '.swiper-pagination',
        loop: true
      },
      swiperLists: [{
        id: '0001',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1809/90/2f9e4bd02ba83202.jpg_890x330_0aa870e7.jpg'
      }, {
        id: '0002',
        imgUrl: 'http://img1.qunarzz.com/piao/fusion/1811/c2/cf99d28bb0ac8b02.jpg_890x330_81ad66fd.jpg'
      }]
    }
  }
}
</script>
/**padding-bottom为图片高宽比自适应 */
<style lang="stylus" scoped>
    .wrapper >>> .swiper-pagination-bullet-active
     background: #fff
    .wrapper
        overflow: hidden
        width: 100%
        height: 0
        padding-bottom: 37.08%
        background: #eee
        .swiper-img
            width:100%
</style>

示例代码如上，主要为.wrapper下width heught  及 padding-bottom设置