小程序 轮播图样式设置

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


相关推荐

  • oracle基本面试题_mongodb面试题

    oracle基本面试题_mongodb面试题1.Oracle跟SQLServer2005的区别?宏观上:1).最大的区别在于平台,oracle可以运行在不同的平台上,sqlserver只能运行在windows平台上,由于windows平台的稳定性和安全性影响了sqlserver的稳定性和安全性2).oracle使用的脚本语言为PL-SQL,而sqlserver使用的脚本为T-SQL微观上:从数据类型,数据库…

    2022年8月29日
    3
  • 发送国外邮箱失败

    发送国外邮箱失败在公司当发送邮件给国外客户的时候,发送失败提示:点击下面链接:则代表地址被加入了黑名单,发送不到邮件。解决方法,点击方框内的网站,打开网页后拉到最下面:点击解除封禁跳转到则表示成功。需要1-2个小时进行解除! 转载于:https://blog.51cto.com/8763846/1629650…

    2022年7月12日
    25
  • 基于ssm酒店管理系统的毕业设计_酒店管理系统

    基于ssm酒店管理系统的毕业设计_酒店管理系统开发工具(eclipse/idea):eclipse4.5/4.8或者idea2018,jdk1.8数据库:mysql功能模块:登录界面可以选择普通账号登录,酒店管理员登录和系统管理员登录。普通账号注册功能:注册时需填写用户名、密码、姓名、性别、邮箱等个人信息登录功能:登录已经注册过的账号,没注册的无法登录忘记密码功能:登录时忘记密码可通过填写姓名,邮箱查询密码。预订酒店:可以选择预订众多酒店其中的一个酒店的一个房间,可以选择日期住宿管理:可以看到自己是否预订成功,预订成功则有

    2022年9月24日
    1
  • matlab的trapz求定积分_matlab求离散点积分

    matlab的trapz求定积分_matlab求离散点积分EDA365欢迎您登录!您需要登录才可以下载或查看,没有帐号?注册x(T(B3I-e%Q&H3mtrapz是基于梯形法则的离散点积分函数。调用形式:6H*C!TA0dI=trapz(x,y)g3];x1g(x!w(Kh+R%R3G6`其中x和y分别是自变量和对应函数值,以sin(x)在[0,pi]积分为例:/p…

    2025年6月19日
    3
  • 平行运算:Parallel.For、Parallel.Foreach的体验式试用[通俗易懂]

    平行运算:Parallel.For、Parallel.Foreach的体验式试用[通俗易懂]在编程里面我们经常会遇到编历一个列表或数组做同一件事情或操作,当这个数组或列表很大时又或是需要进行很复杂的操作时,就会花费很长的时间。以前我就在想能不能在这种情况下使用多线程的方式提高效率,可惜一直都没机会和动力(实际需要)去研究。今天在网上查找资料,很偶然的发现.NETFramework4.0中平行算法相关内容(Parallel.For、Parallel.Foreach),原来.NET已经实

    2022年7月19日
    21
  • HttpSession的生命周期和何时销毁

    HttpSession的生命周期和何时销毁HttpSession生命周期:1.什么时候创建HttpSession1).对于JSP:是否浏览器访问服务端的任何一个JSP或Servlet,服务器都会立即创建一个HttpSession对象呢?不一定。①.若当前的JSP或(Servlet)是客户端访问的当前WEB应用的第一个资源,且JSP的page指定的session属性为false,则服务器就不会为JSP创建一个HttpSess…

    2022年7月12日
    19

发表回复

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

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