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

2024-09-28 23:04:41

<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的项目使用Element ui 走马灯无法实现的问题

1.在vue项目中引入element ui http://element.eleme.io/#/zh-CN/component/carousel 引入后,HTML部分 <el-carousel height="150px"> <el-carousel-item v-for="item in imgList" :key="item" height="300px" > <h3><img :
使用vue+element ui实现走马灯切换预览表格数据

目录 1. 需求分析 2. 效果演示 3. 代码实现 3.1 table.json 3.2 HTML 代码 3.3 Script 代码总结 1. 需求分析有这样一个 json 文件(table.json),里面包含有多组需要展示的表格数据,需求就是需要将这些数据进行展示,并且能快速查看不同的数据,由于数据过多,不能一个表格一个表格的进行展示,所以找了一个比较合适的方法,就是通过走马灯将所有数据进行渲染,当切换走马灯时,再展示对应的数据. 2. 效果演示 3. 代码实现 3.1 table.j
element-plus/element-ui走马灯配置图片及图片自适应的最简便方法

目录目标一:插入图片目标2:图片自适应总结首先展示官网给的模板 <template> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="item in 6" :key="item"> <h3 text="2xl" justi
通过Element ui往页面上加一个分页导航条的方法

需求加入一个分页条,此分页条可以跳转页面,可以根据页码选择具体页面,可以设置当前页面的大小. 在element ui官网选择Pagination分页组件进入element ui官网,然后选择一个合适的分页组件,如下图: UserList.vue组件的template模板中的分页组件的代码和效果分页组件的代码如下图: 分页组件的效果如下图: 分页组件牵涉到的data数据和methods方法分页组件牵涉到的data数据如下图: 分页组件牵涉到的methods方法如下图: 测试首先进入首页,
关于图片按比例自适应缩放的js代码

如下图. 瞄了一下,居中可以用 text-align:center; 来实现.而按比例缩放,利用预设 <img /> 的 width .height 属性解决不了.因为用户图片可能是很长的,也可能是很宽的.在线上想了一下他们的关系,按条件来判断是这样的: 复制代码代码如下: if(实际宽度 > 预览最大宽度) { 缩放宽度 = 预览最大宽度 } if(实际高度 > 预览最大高度) { 缩放高度 = 预览最大高度 } 但是这样会有问题,比如当宽度和高度都被缩放,如果缩放比较不同,图
基于jQuery实现图片推拉门动画效果的两种方法

''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul>  <li&g
实现图片首尾平滑轮播(JS原生方法—节流)

首先给出HTML代码,要注意轮播图片表(#list)末尾加上第一个图片1.jpg,在首部加上最后一个图片5.jpg. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首尾轮播</title> <link rel="stylesheet" href="首尾轮播.css&q
JS网页图片按比例自适应缩放实现方法

用户上传照片,照片的尺寸未知:需要生成一个预览,这个预览图要根据提供给用户预览的区域自应用,并且居中:如果图片太大,需要按比例缩放.如下图. 瞄了一下,居中可以用 text-align:center; 来实现.而按比例缩放,利用预设 <img /> 的 width .height 属性解决不了.因为用户图片可能是很长的,也可能是很宽的.在线上想了一下他们的关系,按条件来判断是这样的: if(实际宽度 > 预览最大宽度) { 缩放宽度 = 预览最大宽度} if(实际高度 > 预
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法

做为一个仿站工作者,当遇到网站有版权时甚至加密的时候,WEBZIP也熄火,怎么扣取网页上的图片和背景图片呢.有时候,可能会想到用火狐,这款浏览器好像一个强大的BUG,文章有版权,屏蔽右键,火狐丝毫也不会被影响. 但是作为一个热爱php的开发者来说,更多的是喜欢自己动手.所以,我就写出了下面的一个源码,php远程抓取图片小程序.可以读取css文件并抓取css代码中的背景图片,下面这段代码也是针对抓取css中图片而编写的. <?php header("Content-Type: text/ht
C#实现图片上传与浏览切换的方法

本文以一个完整实例讲述了C#实现图片上传与浏览切换的方法,对于进行C#程序设计来说具有一定的借鉴价值.分享给大家供大家参考. 具体实现代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %> <!DOCTYPE html PUBLIC "-//W3C//
spring boot 本地图片不能加载（图片路径）的问题及解决方法

在使用html加载图片时,发现本地图片在页面上不能显示,但是直接引用网络上的资源是可以显示的.参考了众多前人的经验,得出一下结论: 本地图片不能显示最主要的问题是,图片在本地url和图片在服务器上被加载是的URL是不一样的.也就是路径的问题. 解决的办法其实很简单,只要写一个配置文件,也就是图片位置的转化器,原理是虚拟一个在服务器上的文件夹,与本地图片的位置进行匹配. 在调用本地图片时,就相当于调用服务器上的图片. 关键的代码如下: @Configuration public class MyW

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

目录

目标一：插入图片

目标2：图片自适应

总结

相关推荐

随机推荐