小程序 轮播图样式设置

小程序 轮播图样式设置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)
上一篇 2022年5月21日 下午11:00
下一篇 2022年5月21日 下午11:00


相关推荐

  • pycharm每次运行需选择interpreter_pycharm怎么配置python环境变量

    pycharm每次运行需选择interpreter_pycharm怎么配置python环境变量在运行时就出现了下图情况,也不知道咋回事,之前删了些以为没用的文件夹,估计是删错了,环境没了。关闭后上面窗口后打开Settings→projectInterpreter选项你里面可能有多个,可以删掉重新添加一个有可能会遇到目录不为空的情况,因为你之前可能创建过这个文件路径啥的复制下面的路径,进去删掉原来的路径里的文件夹。然后再点击ok,重新创建一个…

    2022年8月27日
    12
  • CSDN博客&论坛——“我的2013”年度征文活动火爆进行中!【已结束】[通俗易懂]

    2013年即将过去,在这一年里你可能毕业参加工作、可能跳槽到新公司、可能开始涉猎新的技术领域、可能在CSDN遇上技术牛人、可能参与了极富挑战的项目、可能升职做经理总监、可能和志同道合的朋友们创业、也有可能失业了、投资失败了、与恋人分手了……忙忙碌碌的生活是一成不变、枯燥无味、朝九晚五、钢筋森林、面具伪装?还是不拘一格、激情四溢、饶有情趣、幸福甜蜜?

    2022年4月16日
    49
  • 七、hibernate中的持久层模板操作HibernateTemplate的用法「建议收藏」

    七、hibernate中的持久层模板操作HibernateTemplate的用法「建议收藏」利用模板操作来替换掉持久层的session,必须先将spring和hibernate之间进行整合,整合的applicationContext配置文件介绍在:https://blog.csdn.net/IT_CREATE/article/details/86141823 那么在持久层的代码就如下面这样写:1、对于增删改(和session的操作差不多,也有save、update、del…

    2022年6月17日
    37
  • 查看80端口:_如何查看自己80端口开放

    查看80端口:_如何查看自己80端口开放查看80端口:netstat-ano|findstr80添加端口:netshhttpaddiplistenipaddress=xxx.xxx.xxx.xxx删除端口:netshhtt

    2022年8月3日
    7
  • Caffeine 缓存

    Caffeine 缓存简介在本文中 我们来看看 Caffeine 一个高性能的 Java 缓存库 缓存和 Map 之间的一个根本区别在于缓存可以回收存储的 item 回收策略为在指定时间删除哪些对象 此策略直接影响缓存的命中率 缓存库的一个重要特征 Caffeine 因使用 WindowTinyLf 回收策略 提供了一个近乎最佳的命中率 填充策略 Population Caffein

    2026年3月19日
    2
  • js生成二维码的几种方法_html怎么生成二维码

    js生成二维码的几种方法_html怎么生成二维码一:arale-qrcodearale-qrcodeGitHub路径npmiarale-qrcode<html><body> <divid=”share_tools”></div><scriptsrc=”qrcode.min.js”></script></body>…

    2022年10月18日
    4

发表回复

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

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