vue图片在el-carousel中的自适应

1、html编码
<el-carousel height="600px" indicatorPosition="outside" ref="carousel" @click.native="linkTo">
      <el-carousel-item class="carousel-item" v-for="item in imgs" v-bind:key="item.url">
        <img class="carousel-img" :src="item.url">
      </el-carousel-item>
    </el-carousel>
2、数据
imgs: [
        {url: require('../../assets/images/test1.jpg'), link: '/content1'},
        {url: require('../../assets/images/test2.jpg'), link: '/content2'},
        {url: require('../../assets/images/test3.jpg'), link: '/content3'}
      ]

methods: {
    linkTo () {
      let activeIndex = this.$refs.carousel.activeIndex
      this.$router.push(this.imgs[activeIndex].link)
    }
  }
3、格式编码
  .carousel-item {
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
  }
  .carousel-img {
    max-width: 100%;
    max-height: 100%;
  }