【最简便方法】element-plus/element-ui走马灯配置图片以及图片自适应

【最简便方法】element-plus/element-ui走马灯配置图片以及图片自适应

首先展示官网给的模板

<template>
  <el-carousel :interval="4000" type="card" height="200px">
    <el-carousel-item v-for="item in 6" :key="item">
      <h3 text="2xl" justify="center">{{ item }}</h3>
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>
.el-carousel__item h3 {
  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:

很多博客里给出的方法都太麻烦了,先要获取浏览器大小,又要进行运算设置高度什么的。

像这样子:

其实我们可以一个css属性解决:

object-fit: scale-down; 

该属性详细:

object-fit - CSS(层叠样式表) | MDN (mozilla.org) 

但此时我们发现并没有变化,是因为

没有指定图片的width和height

所以我们再加上属性例如

再次打开页面检查,成功!

图片进行了自适应,可以完整显示。

(跑马灯的背景颜色都可以通过css属性进一步设置)

转载请说明出处内容投诉
CSS教程_站长资源网 » 【最简便方法】element-plus/element-ui走马灯配置图片以及图片自适应

发表评论

欢迎 访客 发表评论

一个令你着迷的主题!

查看演示 官网购买