小程序 轮播图样式设置

小程序 轮播图样式设置swiper标签存在默认的宽度和高度100%*150pximage标签也存在默认的高度和宽度320px*240px设计图片和轮播图先看一下原图的尺寸数据假设750*340让图片的高度自适应宽度为100%让swiper标签的高度与图片的告诉一样高swiper高度/swiper宽度=图片高度/图片宽度swiper高度=图片高度*swiper宽度/图片宽度swiper高度=340*100vw/750100vw为视口宽度图片的.

大家好,又见面了,我是你们的朋友全栈君。

  • swiper标签存在默认的宽度和高度100% * 150px
  • image标签也存在默认的高度和宽度320px * 240px
  • 设计图片和轮播图
  1. 先看一下原图的尺寸数据 假设 750 * 340
  2. 让图片的高度自适应 宽度为100%
  3. 让swiper标签的高度与图片的告诉一样高
    swiper高度 / swiper宽度 = 图片高度 / 图片宽度
    swiper高度 = 图片高度 * swiper宽度 / 图片宽度
    swiper高度 = 340 * 100vw / 750
    100vw 为视口宽度
  • 图片的mode属性一般设置为widthFix
  • swiper标签添加三个属性 autoplay indicator-dots circular
swiper{ 
   
   width: 100%;
   height: calc(340 * 100vw / 720);
 }
 image{ 
   
   width: 100%;
 }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/143294.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • lvextend resize2fs_resize2fs报错

    lvextend resize2fs_resize2fs报错扩容挂载在系统根目录下的lv时,因为1.进程占用问题导致e2fsck-f/dev/cl/root命令执行失败,2.根目录剩余空间太小导致resize2fs-f/dev/cl/root执行报错:resize2fs:Badmagicnumberinsuper-block当尝试打开/dev/mapper/cl-root时找不到有效的文件系统超级块.通过xfs扩

  • 微信小程序云开发 数据库操作(增删查改)

    微信小程序云开发 数据库操作(增删查改)

    2021年11月11日
  • 龙芯架构是自己的吗_debian重装系统

    龙芯架构是自己的吗_debian重装系统龙芯灵珑一体机,型号9s2a,pmon版本LM9103-1.5.9原机硬盘250g,装有debian5和debian6双系统由于在debian6系统下不小心误删除了部分文件,导致系统不能关机,不能重启,故重装。此次安装采用usb安装方式前期准备:(在linux系统下,下载安装文件,解压文件,拷贝到u盘)1,将debian6的安装文件拷贝到u盘(一体机挑u盘,没有u盘可以采用硬盘…

    2022年10月18日
  • 传奇自己架设自己玩_怎么架设传奇服务器

    传奇自己架设自己玩_怎么架设传奇服务器需要的东西与操作1.版本可以去论坛版本库2.DBC2000(百度有下)3.配套登录器(有些引擎自带)简单来说单机架设分为三步1.配置引擎2.上传列表,配置登录器3.补丁解压到客户端根目录首先下好版本之后会有两个压缩包,一个为服务端,一个为游戏补丁;1.百度下载好DBC2000进行解压然后安装即可。2.服务端解压到D盘,名字必须为Mirserver3.开始配置DBC2000,安装好DBC2000之后,在你的电脑里面的控制面板里面会有一个DBE-打开之后右键空白部分new

  • 全局负载均衡(GSLB)的实现方案

    全局负载均衡(GSLB)的实现方案WhatisGSLBGlobalServerLoadBalancing中文:全局负载均衡SLB(Serverloadbalancing)是对集群内物理主机的负载均衡,而GSLB是对物理集群的负载均衡。这里的负载均衡可能不只是简单的流量均匀分配,而是会根据策略的不同实现不同场景的应用交付。GSLB是依赖于用户和实际部署环境的互联网资源分发技术,不同的目的对应着一系列不…

  • 几款国产开源的Windows界面库

    几款国产开源的Windows界面库vchelp2013-3-212:10:47阅读(3972)评论(0)上次介绍的几款图形界面库http://blog.okbase.net/vchelp/archive/23.html都是国外的开源项目,今天介绍的几款都是国人的开源项目,大部分是采用DirectUI设计思想。 1. 炫彩界面库XCGUI炫彩界面库不仅是界面库,它是软件界面开发框架,让用户开发

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号