小程序 轮播图样式设置

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


相关推荐

  • vbs代码弹计算机,如何恶搞朋友的电脑?超简单的vbs代码

    vbs代码弹计算机,如何恶搞朋友的电脑?超简单的vbs代码这东西不好做成视频教程,我们就做成文章出来分享吧!编写vbs有多简单?新建“文本文档”,输入msgbox”一大波病毒正在靠近…”,点击文件->另存为->重命名为“代码.vbs”。文件名不重要,重要的是后缀要是“.vbs”双击保存的文件:代码.vbs,即弹出一个对话框。记下这段小小的代码,去同学家里恶搞吧。当然你还可以输入其他有趣的文字。当然,如此恶搞还是不够的。那就来一个无限循…

    2022年6月4日
    44
  • Java编程语言简单常用的输入输出格式

    Java编程语言简单常用的输入输出格式Java语言和C语言的输入输出不同。C语言直接使用scanf()函数进行输入,使用printf()函数进行输出。而在Java中,所谓的函数有了一个新的名词,叫做方法。输入输出方法并不能想C语言那样可以默认直接使用。在使用前需要进行import进行类的导入,然后再进行方法的调用。具体实现,我们可以结合一段简单的代码来解释说明。源码如下:importjava.util.Scanner;publ…

    2022年7月8日
    21
  • 软件开发模式有哪些(软件工程开发模式)

    软件开发模式简介1.边做边改模型(Build-and-FixModel)  好吧,其实现在许多产品实际都是使用的“边做边改”模型来开发的,特别是很多小公司产品周期压缩的太短。在这种模型中,既没有规格说明,也没有经过设计,软件随着客户的需要一次又一次地不断被修改。  在这个模型中,开发人员拿到项目立即根据需求编写程序,调试通过后生成软件的第一个版本。在提供给用户使用后,如果程序出现错…

    2022年4月14日
    45
  • java 上传文件到服务器_ameqp服务器网址

    java 上传文件到服务器_ameqp服务器网址privateStringsaveImageReturnPath(MultipartFilemultiFile)throwsIllegalStateException,IOException{ StringdateName=PicFileUtil.randomFileName()+multiFile.getOriginalFilename(); …

    2025年9月13日
    5
  • MyBatis-Plus 之逻辑删除

    MyBatis-Plus 之逻辑删除MyBatis-Plus之逻辑删除实现概念逻辑删除:文件没有被真正的删除,只不过是文件名的第一个字节被改成操作系统无法识别的字符,通常这种删除操作是可逆的,就是说用适当的工具或软件可以把删除的文件恢复出来。物理删除:指文件存储所用到的存储区域被真正的擦除或清零,这样删除的文件是不可以恢复的,物理删除是计算机处理数据时的一个概念。逻辑删除就是对要被删除的数据打上一个删除标记,在逻辑上,数据是被删除了,但数据本身依然存在!而物理删除则是把数据从介质上彻底删除掉。正文首先创建一个数据库表,如下图

    2022年5月20日
    46
  • weakHashMap 用法

    weakHashMap 用法WeakHashMap,此种Map的特点是:当除了自身有对key的引用外,此key没有其他引用,那么GC之后此map会自动丢弃此值举例来说:声明了两个Map对象,一个是HashMap,一个是WeakHashMap,同时向两个map中放入a、b两个对象,当HashMapremove掉a并且将a、b都指向null时,WeakHashMap中的a将自动被回收掉。出现这个状况的原因是,对于a对象…

    2022年5月6日
    45

发表回复

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

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