小程序 轮播图样式设置

小程序 轮播图样式设置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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【电路收藏夹】AMS1117稳压电路「建议收藏」

    【电路收藏夹】AMS1117稳压电路「建议收藏」电路图说明10uF=10622uF=226100nF=104AMS1117管脚图注意AMS1117最大输入电压为15V

    2022年6月20日
    22
  • HashMap原理<转>

    HashMap原理<转>

    2021年9月7日
    53
  • Python生成随机数列表_numpy产生指定范围的随机数

    Python生成随机数列表_numpy产生指定范围的随机数一.最直接的方式:用numpy.random模块来生成随机数组1、np.random.rand用于生成[0.0,1.0)之间的随机浮点数,当没有参数时,返回一个随机浮点数,当有一个参数时,返回该参数长度大小的一维随机浮点数数组,参数建议是整数型,因为未来版本的numpy可能不支持非整形参数。importnumpyasnp>>>np.random.rand(10)array([0

    2022年10月4日
    0
  • 史上最硬核的Linux命令大全,还不收藏? ❤️【通俗易懂,小白一看就会】「建议收藏」

    史上最硬核的Linux命令大全,还不收藏? ❤️【通俗易懂,小白一看就会】「建议收藏」目录????前言????命令汇总????文件管理1️⃣ls命令–显示指定工作目录下的内容及属性信息2️⃣cp命令–复制文件或目录3️⃣mkdir命令–创建目录4️⃣mv命令–移动或改名文件5️⃣pwd命令–显示当前路径????文档编辑1️⃣cat命令–在终端设备上显示文件内容2️⃣e…

    2022年10月21日
    0
  • PhpStorm2017.1版激活方法、汉化方法以及界面配置「建议收藏」

    PhpStorm2017.1版激活方法、汉化方法以及界面配置「建议收藏」本教程仅对2017.1版有效!!!!!!PhpStorm激活和汉化文件下载网址(提取密码:62cg)PhpStorm的介绍PhpStorm是一个轻量级且便捷的PHPIDE,其旨在提高用户效率,

    2022年7月2日
    24
  • 雪崩效应 (密码学术语)

    雪崩效应 (密码学术语)雪崩效应(密码学术语)雪崩效应就是一种不稳定的平衡状态也是加密算法的一种特征,它指明文或密钥的少量变化会引起密文的很大变化,就像雪崩前,山上看上去很平静,但是只要有一点问题,就会造成一片大崩溃。可以用在很多场合对于Hash码,雪崩效应是指少量消息位的变化会引起信息摘要的许多位变化。这个概念有点类似于蝴蝶效应。蝴蝶效应,说的是,指在一个动力系统中,初始条件下微小的变化能带动整个系统的长期的巨大的连锁反应。说的是极少的变化引发的大变化。雪崩效应在服务器应用系统中,也同样存在,如…

    2022年7月13日
    21

发表回复

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

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