elementui使用走马灯插入图片

Question

问题描述

运用element-ui的el-carousel时，图片显示不全
原图片大小为2273 x 1418

问题出现的环境背景及自己尝试过哪些方法

使用了vue和element-ui
尝试过固定宽高和图片自适应宽高和等比缩放

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
html部分

<template>
  <div class="game">
    <v-homeheader />
    <div class="main">
      <template>
        <el-carousel :interval="5000" type="card" trigger="click" height="300px">
          <el-carousel-item>
            <img src="../../assets/images/freedom&destiny.png" class="carouselimg" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="../../assets/images/freedom&destiny.png" class="carouselimg" />
          </el-carousel-item>
          <el-carousel-item>
            <img src="../../assets/images/freedom&destiny.png" class="carouselimg" />
          </el-carousel-item>
        </el-carousel>
      </template>
    </div>
    <v-footer />
  </div>
</template>

css部分

.carsouselimg {
  width: auto;
  height: 300px;
}

你期待的结果是什么？实际看到的错误信息又是什么？

希望图片能完整显示，不失真

Answer 1

改为div背景图片，填充显示。div宽高跟随<el-carousel-item>

div的作用就是呈现图片背景啊。div宽高跟随父容器，设置100%。
这样图片作为背景可以拉伸、裁切各种显示方式。这个好像很常见的。。
https://codepen.io/nidusp/pen...