element-plus/element-ui跑马灯配备照片及图片自适应的方式
最先展现官方网站给出的模版
<template>
<el-carousel :interval="4000" type="card" height="200px">
<el-carousel-item v-for="item in 6" :key="item">
<h4 text="2xl" justify="center">{{ item }}</h4>
</el-carousel-item>
</el-carousel>
</template>
<style scoped>
.el-carousel__item h4 {
color: #475669;
opacity: 0.75;
line-height: 200px;
margin: 0;
text-align: center;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n 1) {
background-color: #d3dce6;
}
</style>总体目标一：添加图片
（后面可以使用props动态性接受填装照片，这儿立即启用来演试）
step1：
我们可以把v-for具体内容改成【item in imgList】，从我们自身设定的结合里取数据信息，在其中动态绑定的：key就是从imgList集合中取。
step2：
在data中，大家设定imgLisy结合，每一个原素包括id和图片地址。
这儿我们将照片保存在静态数据资源assets中，需要使用require（“@/xxxx/xxxx”）格式来获取图片。
这时候我们不难发现，只开展这二步，照片取得成功放进去了，可是尺寸并不合适。
总体目标2：照片响应式
step3:
许多blog里给的方法都太费劲了，需先获得电脑浏览器尺寸，还得开展计算设定相对高度之类的。
像这样：
实际上我们能一个css属性处理：
object-fit: scale-down;
该特性详尽：
object-fit - CSS（堆叠页面布局） | MDN (mozilla.org)
但这时我们不难发现并没转变，是由于
并没有特定图形的width和height
因此我们加上特性比如
再度打开网址查验，取得成功！
到这里，有关“element-plus/element-ui跑马灯配备照片及图片自适应的方式”课程的学习就没有了，期待可以解决小伙伴们的困惑。理论和实际搭配能更好地协助学习借鉴，快点看一下吧！若要再次了解更多的基本知识，请继续关注花开半夏网址，小编将再接再厉为大家带来了大量好用的文章内容！