Vue项目中遇到elemenui  carousel跑马灯图片显示不完全问题,用chrome调试器,发现轮播图中间的width是外层的50%,这样必然会导致图片不自适应。

elementui carousel不能自适应问题

 

 

 

 

 直接简单粗暴重写carousel样式。

    .el-carousel {
      /deep/ .el-carousel__item--card {
        width: auto !important;
      }
      /deep/ .el-carousel__item {
        width: auto !important;
      }
      /deep/ .el-carousel__item--card.is-active {
        z-index: 2;
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0px) !important;
      }
    }

el-carousel给定height为图片高度即可

相关文章:

  • 2021-12-20
  • 2021-10-02
  • 2022-12-23
  • 2022-12-23
  • 2022-01-07
  • 2022-12-30
  • 2022-12-23
  • 2021-08-27
猜你喜欢
  • 2021-12-02
  • 2021-12-16
  • 2021-11-10
  • 2022-12-23
  • 2022-12-23
  • 2021-05-21
  • 2022-12-23
相关资源
相似解决方案