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

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,就会显示不全。

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

skywalking 9.0.0开启自监控和配置集群

一、skywalking介绍 SkyWalking是有国内开源爱好者吴晟开源并提交到Apache孵化器的开源项目&#xff0c;2017年12月SkyWalking成为Apache国内首个个人孵化项目&#xff0c;2019年4月17日SkyWalking从Apache基金会的孵化器毕业成为顶级项目&#xff0c;目前SkyWalking支持Java、…

CSS 滚动捕获 scroll-margin

CSS滚动捕获 scroll-margin 非滚动捕获容器语法兼容性 CSS滚动捕获 scroll-margin 设置元素的滚动外边距 非滚动捕获容器 之前在 scroll-padding 中说过如何用 scroll-padding 避免锚点定位时元素贴着容器边缘的问题, 现在我们尝试用 scroll-margin 解决 <body><ma…

连接器信号完整性仿真教程 九

前面几篇博文介绍了用CST Studio Suite做连接器信号完整性仿真的基本操作步骤、方法、技巧。本文介绍用Ansys HFSS做连接器信号完整性仿真的基本操作布置。将以 B to B Connector为实例&#xff0c;Step By Step详细讲解Ansys HFSS连接器信号完整性仿真操作步骤。 打开ANSYS E…

JVM 内存回收算法

文章目录 JVM 内存回收算法有哪些&#xff1a;一、分代收集1.分代收集理论2.垃圾收集 二、垃圾收集算法1. 标记-清除算法2. 复制算法3. 标记-整理算法 JVM就是Java虚拟机&#xff0c;JVM的内回收对其原理的认识也是很有必要的&#xff0c;当底层的系统出现内存溢出或者内存泄漏…

列表插槽使用

{label: 是否展示,prop: isShow,solt: true, }<!--自定义列--><template slot-scope"scope" slot"isShow"><div style"color: red;cursor: pointer" focus"getIsShow(scope.row)" ><el-switch v-model"sco…

httpd软件

目录 一.什么是http 二.访问浏览器的过程 三.http的协议版本 四.http的常见配置 一.什么是http 万维网&#xff1a;是数据库&#xff0c;存放链接关系的&#xff0c;例存放baidu-->jd的链接 URL&#xff1a;描述文件的具体位置&#xff0c;一个资源在服务器的具体位置…

分享82个节日PPT,总有一款适合您

分享82个节日PPT&#xff0c;总有一款适合您 82个节日PPT下载链接&#xff1a;https://pan.baidu.com/s/1boDTl3PiHFXLJ890CoUfJA?pwd8888 提取码&#xff1a;8888 Python采集代码下载链接&#xff1a;采集代码.zip - 蓝奏云 学习知识费力气&#xff0c;收集整理更不易。…

docker容器启用ipv6地址方法,用ipv6地址访问容器方法流程、创建一个nginx容器用ipv6地址访问测试流程

文章目录 docker容器启用ipv6地址方法Docker-Compose启用IPv6启用ipv6重启docker生效创建一个ipv6的docker网络创建容器测试v6地址使用ipv6的网络创建容器使用普通网络创建容器测试 创建一个nginx容器用ipv6地址访问测试容器创建ipv4地址验证ipv6地址访问验证修改nginx容器网页…

Java面向对象(高级)-- 类的成员之五:内部类(InnerClass)

文章目录 一、 概述&#xff08;1&#xff09; 介绍1. 什么是内部类2. 为什么要声明内部类3. 内部类使用举例4. 内部类的分类 &#xff08;2&#xff09;举例&#xff08;3&#xff09;重点知识1. 对成员内部类的理解2. 创建成员内部类的实例2.1 静态成员内部类2.2 非静态成员内…

大数据读本:暴雨以数字技术助力传统产业数字化转型

发展数字经济&#xff0c;产业数字化是重要引擎。暴雨作为数字经济的领军企业&#xff0c;近年来积极利用数字技术对传统产业进行全方位、全角度、全链条的改造&#xff0c;提高要素生产率&#xff0c;释放数字对经济发展的放大、叠加、倍增作用。在农业产业化方面&#xff0c;…

【开源】基于Vue和SpringBoot的校园二手交易系统

项目编号&#xff1a; S 009 &#xff0c;文末获取源码。 \color{red}{项目编号&#xff1a;S009&#xff0c;文末获取源码。} 项目编号&#xff1a;S009&#xff0c;文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 二手商品档案管理模…

K7系列FPGA多重启动(Multiboot)

Xilinx 家的 FPGA 支持多重启动功能&#xff08;Multiboot&#xff09;&#xff0c;即可以从多个 bin 文件中进行选择性加载&#xff0c;从而实现对系统的动态更新&#xff0c;或系统功能的动态调整。 这一过程可以通过嵌入在 bit 文件里的 IPROG 命令实现上电后的自动加载。而…

房产中介管理信息系统的设计与实现

摘 要 随着房地产业的开发&#xff0c;房产中介行业也随之发展起来&#xff0c;由于房改政策的出台&#xff0c;购房、售房、租房的居民越来越多&#xff0c;这对房产中介部门无疑是一个发展的契机。本文结合目前中国城市房产管理的实际情况和现阶段房屋产业的供求关系对房产中…

用Java写一个王者荣耀游戏

目录 sxt包 Background Bullet Champion ChampionDaji GameFrame GameObject Minion MinionBlue MinionRed Turret TurretBlue TurretRed beast包 Bear Beast Bird BlueBuff RedBuff Wolf Xiyi 打开Eclipse创建图片中的几个包 sxt包 Background package sxt;…

Rust语言项目实战(三) - 创建主循环

回顾 在前面的章节中&#xff0c;我们大致已经完成了如下的工作&#xff1a; 为游戏添加了音频文件为游戏准备了备用屏幕及设置为游戏准备了键盘的即时捕获输入的设置在退出游戏前恢复上述的设置 众所周知&#xff0c;游戏在不手动退出的情况下应该一直运行下去&#xff0c;…

编程好处、系统介绍、app演示

编程视频教学地址&#xff1a; 1、编程好处 1.1、自主开发 类似微信、qq等软件应用&#xff0c;解决人们日常生活问题 例如&#xff1a; 1&#xff09;你可以&#xff0c;自己开发一个网站&#xff0c;管理自己的日常生活照片&#xff0c;防止哪一天手机掉了或丢了&#xff0…

UVA11729 Commando War

UVA11729 Commando War 题面翻译 突击战 你有n个部下&#xff0c;每个部下需要完成一项任务。第i个部下需要你花Bj分钟交代任务&#xff0c;然后他就会立刻独立地、无间断地执行Ji分钟后完成任务。你需要选择交代任务的顺序&#xff0c;使得所有任务尽早执行完毕&#xff08…

高斯混合模型:GMM和期望最大化算法的理论和代码实现

高斯混合模型(gmm)是将数据表示为高斯(正态)分布的混合的统计模型。这些模型可用于识别数据集中的组&#xff0c;并捕获数据分布的复杂、多模态结构。 gmm可用于各种机器学习应用&#xff0c;包括聚类、密度估计和模式识别。 在本文中&#xff0c;将首先探讨混合模型&#xf…

【Java Web学习笔记】 1 - HTML入门

项目代码 https://github.com/yinhai1114/JavaWeb_LearningCode/tree/main/html 零、网页的组成 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息&#xff0c;可以包含文字、图片视频等。 CSS样式是表现。就像网页的外衣。比如&#xff0c;标题字体、…

electerm下载和安装

electerm下载和安装 一、概述 electerm 是一款免费开源、基于electron/ssh2/node-pty/xterm/antd/ subx等libs的终端/ssh/sftp客户端(linux, mac, win)。 而且个人觉得electerm界面更好看一些&#xff0c;操作都是类似的。 二、下载安装 下载地址&#xff1a;https://elec…