图片盒子设置宽度，图片自适应_vue中如何让轮播图的中图片自适应盒子大小-CSDN博客

本文链接：https://blog.csdn.net/m0_58361435/article/details/135566433

本文介绍了如何在Vue组件中，通过CSS定位和适当设置宽度或使用`object-fit`属性，实现图片在el-carousel中的自适应显示，保证在不同屏幕尺寸下都能居中且完整显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<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>