element-plus/element-ui走马灯配置图片及图片自适应的最简便方法
更新时间：2023年03月23日 15:48:16 作者：STATICHIT静砸
走马灯功能在展示图片时经常用到,下面这篇文章主要给大家介绍了关于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属性进一步设置）
总结
到此这篇关于element-plus/element-ui走马灯配置图片及图片自适应的最简便方法的文章就介绍到这了,更多相关element-ui走马灯配置图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要给大家介绍了关于vue项目开启gzip压缩功能的相关资料,gizp压缩是一种http请求优化方式,通过减少文件体积来提高加载速度,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-07-07
这篇文章主要介绍了vue弹窗如何嵌入其它vue页面,实现方式是将其他页面作为组件传入，在父页面将该组件引入到弹框内，实例代码简单易懂需要的朋友可以参考下2022-11-11
vue项目中,前端使用axios与后台进行数据请求或者提交的时候,如果后台没有设置跨域,浏览器做数据请求的时候就会报错,这篇文章主要给大家介绍了关于vue如何解决axios请求前端跨域问题的相关资料,需要的朋友可以参考下2021-10-10
这篇文章主要介绍了vue+webpack模拟后台数据的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
vite.config.js是Vite框架中的配置文件,用于配置项目的构建和运行时的行为,下面这篇文章主要给大家介绍了关于vite项目vite.config.js详细配置的相关资料,需要的朋友可以参考下2023-05-05
在后台管理系统中,经常需要在多个页面中使用搜索功能,本文就来介绍一下Element-plus封装搜索组件的实现,具有一定的参考价值,感兴趣的可以了解一下2024-08-08
这篇文章主要介绍了vue input框的禁用和可输入问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要给大家介绍了如何通过一篇文章学会Vue中间件管道的相关资料,什么是中间件管道？中间件管道是一堆不同的中间件并行运行,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2021-06-06
这篇文章主要介绍了vue中的mescroll搜索运用及各种填坑处理，文中通过代码给大家讲解了mescroll vue使用，感兴趣的朋友跟随小编一起看看吧2019-10-10
这篇文章主要介绍了vue从使用到源码实现的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
最新评论