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走马灯配置图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Typescript 5年内的热度随时间变化的趋势，整体呈现一个上升的趋势。也说明ts越来越️受大家的关注了。这篇文章主要介绍了Vue 中使用 typescript的方法详解,需要的朋友可以参考下2020-02-02
本文通过实例代码给大家介绍了vue 下列表侧滑操作,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2018-07-07
这篇文章主要介绍了Vue自定义复制指令 v-copy,使用自定义指令创建一个点击复制文本功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
解决webpack+Vue引入iView找不到字体文件的问题
今天小编就为大家分享一篇解决webpack+Vue引入iView找不到字体文件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
antd vue table跨行合并单元格,并且自定义内容实例
这篇文章主要介绍了antd vue table跨行合并单元格,并且自定义内容实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
这篇文章主要介绍了vue项目中遇到的深拷贝浅拷贝问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
vue-cli history模式实现tomcat部署报404的解决方式
这篇文章主要介绍了vue-cli history模式实现tomcat部署报404的解决方式,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-09-09
这篇文章主要介绍了Vue多组件仓库开发与发布详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
在for循环中生成的元素要加key属性不仅是在Vue框架中是要添加的，在React框架中也是要添加的。但\其实都不是必须的，因为在 Vue和React中不加key是不会报错的，只是会有警告。但是我们在深入了解加key的原因后会明白，若想确保没有隐患的话，元素还是必须要加key属性。2021-05-05
关于在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题(完美解决)
这篇文章主要介绍了解决在vscode使用webpack指令显示"因为在此系统中禁止运行脚本"问题,本文给大家分享完美解决方法，需要的朋友可以参考下2021-07-07
最新评论