小程序 轮播图样式设置

小程序 轮播图样式设置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)


相关推荐

  • B样条曲线(B-spline Curves)

    B样条曲线(B-spline Curves)关键字:NURBS,基函数,控制点,节点,另一个讲的很好的https://www.cnblogs.com/icmzn/p/5100761.html看了网上很多相关资料才得以下笔,资料太多,这里就不一一列举了,感谢各位大佬的资料本博客顺序不太好,看前面的东西可能需要提前看后面的东西。正在努力修炼,敬请谅解写了个B样条曲线计算的完成程序,包括绘图,https://download.c…

  • 浅析linux内核中的idr机制

    idr在linux内核中指的就是整数ID管理机制,从本质上来说,这就是一种将整数ID号和特定指针关联在一起的机制。这个机制最早是在2003年2月加入内核的,当时是作为POSIX定时器的一个补丁。现在,

    2021年12月27日
  • 【USB】全球USB厂家 USB ID大全。更新时间:2017-07-29[通俗易懂]

    【USB】全球USB厂家 USB ID大全。更新时间:2017-07-29[通俗易懂]## ListofUSBID’s## MaintainedbyStephenJ.Gowdy# Ifyouhaveanynewentries,pleasesubmitthemvia# http://www.linux-usb.org/usb-ids.html# orsendentriesaspatches(diff-uoldnew)i

  • win10的pagefile.sys是什么文件?pagefile.sys文件太大如何移动到D盘中?

    win10的pagefile.sys是什么文件?pagefile.sys文件太大如何移动到D盘中?    在C盘系统下,有一个命名为pagefile.sys的文件占用C盘太大的空间,不少用户怕删除pagefile.sys文件之后会对系统造成影响,而不少用户想要将pagefile.sys文件移动到D盘中。那么pagefile.sys是什么文件?Win10系统下pagefile.sys文件太大如何移动到D盘中?pagefile.sys是什么文件?pagefile.sys文件是操作系…

  • python基础教程 入门教程_python基础入门教程

    python基础教程 入门教程_python基础入门教程首先,我已经假定你已经看了无数遍的垃圾文章,然后依然搞不懂类和对象,但是呢起码知道有类和对象这么两个玩意儿。由于你没有编程经验,所以无法从学过的编程语言里通过类比去理解Python的‘类和对象’。咱们用生活中的例子来说说,建房子。类(class):相当于施工图纸(blueprint)对象(object):房子(已经建造好的)假设你手上有施工图纸(Blueprint),里面有房子的所有信…

  • Java线程中的wait、notify和notifyAll解析

    Java线程中的wait、notify和notifyAll解析顾客去包子铺买包子,告知老板自身需求后,进入等待(调用wait()方法)老板处理的过程,此时顾客的状态为WAITING,老板做好包子后,告知(调用notify()方法)顾客包子做好了。?线程间的通信的主要思想是生产者消费者机制。

发表回复

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

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