element-plus的走马灯carousel图片轮播让图片居中显示

news2025/3/6 20:58:11

element-plus的走马灯carousel图片轮播怎么让图片居中显示呢?官网里查了一下,没找到。只能自己摸索一下了。盒子模型,要让图片居中,首先要确定盒子的大小,然后确定图片的大小,盒子使用居中样式,应该就是这样。

Banner.vue

<script setup>

</script>

<template>
  <el-carousel height="720px" :interval="3000" arrow="always">
    <el-carousel-item>
      <img src="/image/alex.jpeg" alt="">
    </el-carousel-item>
    <el-carousel-item>
      <img src="/image/banner1.png" alt="">
    </el-carousel-item>
    <el-carousel-item>
      <img src="/image/banner2.png" alt="">
    </el-carousel-item>
    <el-carousel-item>
      <img src="/image/banner3.png" alt="">
    </el-carousel-item>
  </el-carousel>
</template>

<style scoped>
.el-carousel {
  text-align: center;
}
.el-carousel__item img {
  height: 720px;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>

首先确定走马灯的高度是720px,那宽度自动就是100%了。再确定盒子的子元素居中显示:

.el-carousel {
  text-align: center;
}

再确定图片的高度是720px,如果不确定图片的高度,如果有图片小于这个高度或者大于720px,就会显示不全。

正常的确定图片高度后,图片的宽度会自动按照比例缩放。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1277515.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

24双非硕的秋招总结

24 双非硕的秋招总结 结果&#xff1a; 运气捡漏去了腾讯 想想自己整个研究生学习过程&#xff0c;还是挺坎坷的&#xff0c;记录一下&#xff0c;也给未来的同学提供一些参考。 研一 我是研一上开始学前端的&#xff0c;应该是21年10月份左右&#xff0c;我们实验室是专门…

配置中心--Spring Cloud Config

目录 概述 环境说明 步骤 创建远端git仓库 准备配置文件 配置中心--服务端 配置中心--客户端 配置中心的高可用 配置中心--服务端 配置中心--客户端 消息总线刷新配置 配置中心--服务端 配置中心--客户端 概述 因为微服务架构有很多个服务&#xff0c;手动一个一…

C++的explicit和隐式转换

隐式转换是指在某些情况下&#xff0c;编译器会自动进行类型转换&#xff0c;将一种类型的值转换为另一种类型&#xff0c;以满足表达式的要求。这种转换是隐式进行的&#xff0c;不需要显式地调用转换函数或构造函数。 int a 5; double b a; // int 到 double 的隐式转换上…

xxl-job 分布式任务调度框架

文章目录 分布式任务调度XXL-Job 简介XXL-Job 环境搭建XXL-Job (源码说明)配置部署调度中心docker安装 Bean模式任务(方法形式)-入门案例任务详解任务详解-执行器任务详解-基础配置任务详解-调度配置任务详解-基础配置任务详解-阻塞处理策略任务详解-路由策略 路由策略路由策略…

系统地自学 Python

文章目录 如何系统地自学 Python1. 选择合适的 Python 版本2. 安装 Python 和必要的工具3. 学习 Python 的基础知识4. 学习 Python 的高级特性5. Python 的应用领域6. 保持良好的学习习惯 如何系统地自学 Python Python 是一种广泛使用的编程语言&#xff0c;它具有简洁、易读、…

公众号文章采集器,免费的公众号文章采集

优质的公众号文章如同一座宝库&#xff0c;蕴含着丰富的知识和实用的信息。众多公众号纷繁复杂&#xff0c;如何高效地收集到优质文章成为许多人的难题。我们将专心分享如何收集优质公众号文章的方法&#xff0c;为您揭示收集优质文章的独门技巧。 如何高效收集公众号优质文章 …

【java智慧工地源码】智慧工地物联网云平台,实现现场各类工况数据采集、存储、分析与应用

“智慧工地整体方案”以智慧工地物联网云平台为核心&#xff0c;基于智慧工地物联网云平台与现场多个子系统的互联&#xff0c;实现现场各类工况数据采集、存储、分析与应用。通过接入智慧工地物联网云平台的多个子系统板块&#xff0c;根据现场管理实际需求灵活组合&#xff0…

【斗罗二】暗杀霍雨浩行动,马小桃霸气回击,江楠楠首秀武魂兔兔

Hello,小伙伴们&#xff0c;我是拾荒君。 《斗罗大陆Ⅱ绝世唐门》第25集更新了&#xff01;和小伙伴们一样&#xff0c;一更新&#xff0c;拾荒君就急不可待地观看这一集。故事情节高潮迭起&#xff0c;尤其是霍雨浩与王冬面对六名杀手的惊险场景&#xff0c;真是让人心跳加速…

clip-path,css裁剪函数

https://www.cnblogs.com/dzyany/p/13985939.html clip-path - CSS&#xff1a;层叠样式表 | MDN 我们看下这个例子 polygon里有四个值分别代表这四个点相对于原图左上方的偏移量。 裁剪个五角星

《算法通关村——原来滑动窗口如此简单》

《算法通关村——原来滑动窗口如此简单》 基本思想 滑动窗口的思想非常简单&#xff0c;如下图所示&#xff0c;假如窗口的大小是3&#xff0c;当不断有新数据来时&#xff0c;我们会维护一个大小为3的一个区间&#xff0c;超过3的就将新的放入老的移走。 这个过程有点像火车…

基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示功能菜单应用

基于STC12C5A60S2系列1T 8051单片机的液晶显示器LCD1602显示功能菜单应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍液晶显示器LCD1602简单介绍IIC通信简单介绍掉…

将不同时间点的登录状态记录转化为不同时间段的相同登录状态SQL求解

题目 有不同时间点的登录状态记录表state_log如下 请使用sql将其转化为如下表的不同时间段的相同登录状态记录 思路分析&#xff1a; 此类问题需要用到lag或lead函数取上下行对应的数据&#xff0c;然后对前后结果做比较打标签&#xff08;0或1&#xff09;&#xff0c;再…

一文带你了解智能汽车车载网络通信安全架构2023-01-05

本文从汽车车载网络信息安全的角度出发&#xff0c;提出一种汽车车载网络通信安全架构方案&#xff0c;该方案通过构建多域分层入侵检测模型&#xff0c;实现预防—检测—预警的完整安全防护体系。 目前&#xff0c;智能化、网联化、电动化是汽车发展的大趋势&#xff0c;各大…

嵌入式 C 语言中的全局变量问题

大家好&#xff0c;今天分享一篇关于嵌入式C编程中全局变量问题的文章。希望对大家有所启发。 嵌入式特别是单片机os-less的程序&#xff0c;最易范的错误是全局变量满天飞。 这个现象在早期汇编转型过来的程序员以及初学者中常见&#xff0c;这帮家伙几乎把全局变量当作函数形…

vue 前端实现login页登陆 验证码

实现效果 // template <el-form :model"loginForm" :rules"fieldRules" ref"loginForm" label-position"left" label-width"0px" class"login-container"><span class"tool-bar"></sp…

02.PostgreSQL 查询处理期间发生了什么?

PostgreSQL 查询处理期间发生了什么&#xff1f; 文中主要内容引用自PostgreSQL指南&#xff1a;内幕探索 查询处理是PostgreSQL中最为复杂的子系统。如PostgreSQL官方文档所述&#xff0c;PostgreSQL支持SQL2011标准中的大多数特性&#xff0c;查询处理子系统能够高效地处理这…

uniapp-从后台返回的一串地址信息上,提取省市区进行赋值

1.这是接口返回的地址信息 2.要实现的效果 3.实现代码&#xff1a; <view class"address">{{item.address}}</view>listFun() {let url this.$url.url.positionInfoCompany;let param {page: this.page,limit: this.limit,keyword: this.keyword,};thi…

【概率统计】如何理解概率密度函数及核密度估计

文章目录 概念回顾浅析概率密度函数概率值为0&#xff1f;PDF值大于1&#xff1f;一个栗子 核密度估计如何理解核密度估计核密度估计的应用 总结 概念回顾 直方图&#xff08;Histogram&#xff09;&#xff1a;直方图是最直观的一种方法&#xff0c;它通过把数据划分为若干个区…

LINUX 嵌入式C编程--信号编程

基本概念 信号是事件发生时对进程的通知机制&#xff0c;也可以把它称为软件中断。信号与硬件中断的相似之处在于能够打断程序当前执行的正常流程&#xff0c;其实是在软件层次上对中断机制的一种模拟。信号提供了一种处理异步事件的方法。 信号目的 **信号的目的是用来通信…

基于深度学习的肺炎CT图像检测诊断系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 深度学习在肺炎CT图像检测诊断方面具有广泛的应用前景。以下是关于肺炎CT图像检测诊断系统的介绍&#xff1a; 任务…