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