首页天道酬勤element-plus/element-ui跑马灯配备照片及图片自适应的方式

element-plus/element-ui跑马灯配备照片及图片自适应的方式

admin 05-26 08:00 165次浏览
本文主要介绍了“element-plus/element-ui跑马灯配备照片及图片自适应的方式”,在日常操作过程中,相信不少人在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">
      <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动态性接受填装照片,这儿立即启用来演试)

element-plus/element-ui走马灯配置图片及图片自适应的方法

 step1:

我们可以把v-for具体内容改成【item in imgList】,从我们自身设定的结合里取数据信息,在其中动态绑定的:key就是从imgList集合中取。

step2:

在data中,大家设定imgLisy结合,每一个原素包括id和图片地址。

这儿我们将照片保存在静态数据资源assets中,需要使用require(“@/xxxx/xxxx”)格式来获取图片。

这时候我们不难发现,只开展这二步,照片取得成功放进去了,可是尺寸并不合适。

总体目标2:照片响应式

 step3:

许多blog里给的方法都太费劲了,需先获得电脑浏览器尺寸,还得开展计算设定相对高度之类的。

像这样:

element-plus/element-ui走马灯配置图片及图片自适应的方法

实际上我们能一个css属性处理:

object-fit: scale-down; 

该特性详尽:

element-plus/element-ui走马灯配置图片及图片自适应的方法

object-fit - CSS(堆叠页面布局) | MDN (mozilla.org) 

但这时我们不难发现并没转变,是由于

并没有特定图形的width和height

因此我们加上特性比如

element-plus/element-ui走马灯配置图片及图片自适应的方法

再度打开网址查验,取得成功!

到这里,有关“element-plus/element-ui跑马灯配备照片及图片自适应的方式”课程的学习就没有了,期待可以解决小伙伴们的困惑。理论和实际搭配能更好地协助学习借鉴,快点看一下吧!若要再次了解更多的基本知识,请继续关注花开半夏网址,小编将再接再厉为大家带来了大量好用的文章内容!

element-plus/element-ui跑马灯配备照片及图片自适应的方式
java身份证合法性校验工具类实例代码 IDEA中切换不同版本的JDK的详细教程(超管用)
相关内容