小程序 轮播图样式设置

小程序 轮播图样式设置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%;
 }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

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

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 图像处理的Dither和Banding「建议收藏」

    图像处理的Dither和Banding「建议收藏」由于前面的文章涉及到了这两个概念,而我又对图像处理一窍不通,所以专门写一篇文章来了解这两个概念。Colourbanding       banding是计算机图形中颜色表现不精确的一个问题。DitherDither(抖动)是一种故意造成的噪音用以随机化量化误差,阻止大幅度拉升图像时导致的像banding(色带)这样的问题.Dither概念常用在

    2022年10月13日
    3
  • Intellij idea 2020设置经典样式(背景为黑色Darcula)

    Intellij idea 2020设置经典样式(背景为黑色Darcula)IntelliJIdea安装后一开始的样式是背景色是白的,如果想设置为经典的Darcula样式,按照如下步骤超级即可。File–>settting…—->Appearance—->DarculaApply–>OK即可

    2022年6月27日
    109
  • lseek函数的用法

    lseek函数的用法所有打开的文件都有一个当前文件偏移量(currentfileoffset),以下简称为cfo。cfo通常是一个非负整数,用于表明文件开始处到文件当前位置的字节数。读写操作通常开始于cfo,并且使cfo增大,增量为读写的字节数。文件被打开时,cfo会被初始化为0,除非使用了O_APPEND 。   使用lseek函数可以改变文件的cfo。       #in…

    2022年6月17日
    50
  • oracle以dba登录_oracle认证

    oracle以dba登录_oracle认证第一步:打开cmd到sqlplus.exe所在目录下,然后执行sqlplus/nolog第二步:conn/assysdba这样便会以dba登陆到数据库,如果登陆不上去,报适配器的错误,则先在cmd中输入setoracle_sid=orcl,再连接数据库第三步:创建用户CREATEUSERmyuserIDENTIFIEDBY1234ACCOUNTUNLOCK;第四步:给用户

    2022年9月26日
    4
  • 人力资源管理系统详细设计说明书[通俗易懂]

    人力资源管理系统详细设计说明书[通俗易懂]人力资源管理系统详细设计说明书组名 : K2组员 : 罗猛、丘佩茵2021年1月12日目录1引言 31.1编写目的 31.2背景说明 31.3定义 31.4参考资料 32系统结构 42.1总系统结构图 42.2管理员登录注册模块结构图 42.3部门管理模块结构图 52.4员工管理模块结构图 52.5培训管理模块结构图 62.6招聘管理模块结构图 62.7奖惩管理模块结构图 72.8薪资管理模块结构图 72.9系统管理模块结构图 81.10查看消息模块结构图 83系

    2022年5月15日
    42
  • @RequestParam注解使用

    @RequestParam注解使用1、作用:@RequestParam:将请求参数绑定到你控制器的方法参数上(是springmvc中接收普通参数的注解)2、语法:语法:@RequestParam(value=”参数名”,required=”true/false”,defaultValue=””)value:参数名required:是否包含该参数,默认为true,表示该请求路径中必须包含该参数,如果不包含就报…

    2022年6月30日
    21

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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