图片盒子设置宽度，图片自适应

其实给盒子一个固定的宽高，然后给盒子里面的图片一个定位，然后居中这个盒子就可以了，不要给这个图片设置宽度了就

<template>
  <div class="carousel-page">
    <el-carousel :interval="2000" id="el-carousel">
      <el-carousel-item v-for="(item, index) in imgList" :key="index">
        <img :src="item.img"/>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
export default {
  name: 'carousel-page',
  data () {
    return {
      imgList: []
    }
  },
  created () {
    this.imgList = this.$route.params.record
  }
}
</script>

<style lang="scss" scoped>
.carousel-page {
  @include wh(100vw, 100vh);
  #el-carousel {
    width: 100%;
    height: 100%;
  }
  ::v-deep .el-carousel__container {
    height: 100% !important;
  }
  .el-carousel__item {
    background-color: red;
    width: 100% !important;
    height: 100% !important;
    // 给盒子设置宽度给图片定位就可以在这个盒子里面完全展示这张图片
    img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    // 或者也可以用object-fit: contain;属性如下：二者其一
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
</style>