小程序 轮播图样式设置

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


相关推荐

  • Unicode编码转换工具_韓國萬聖節

    Unicode编码转换工具_韓國萬聖節/** * *@authorypan  *unicode编码转换工具类 *in2009-11-02 */publicclassParseUnicode{  //将unicode编码转换成中文 publicstaticStringdecodeUnicode(finalStringdataStr){   intstart=0;          intend

    2025年5月25日
    0
  • 初识Promises[通俗易懂]

    初识Promises[通俗易懂]原文:PromisesinNode.jswithQ–AnAlternativetoCallbacksby MarcHarter 《Node.jsinPractice》怎么写异步代码?相对原始的callbacks而言,promises无疑是更好的选择。可掌握promises的概念及其用法可能不太容易,而且很有可能你已经放弃它了。但经过一大波码农的努力,promi

    2025年6月15日
    1
  • EasyCVR通过Ehome协议接入部分设备显示离线排查报告

    EasyCVR通过Ehome协议接入部分设备显示离线排查报告对于需要将不同视频协议做融合的项目,我们一般都是建议大家选用EasyCVR视频平台,EasyCVR支持多种协议的视频接入,对于通用的第三方协议,我们支持了海康的Ehome和GB28181的国标协议。EasyCVR视频网关平台接入的部分Ehome设备显示离线,可以从下图中看到,除了通过HIKSDK接入的设备外,通过Ehome接入的设备全部离线:可见离线的部分设备都是Ehome协议接入,Ehome设备为主动注册类型,判断设备是否真实在线的方法一般为抓取对应对端口7660的包,或者是在海康sdk的回调

    2025年7月6日
    0
  • MySQL自增主键auto_increment原理 与 自增主键出现间隙不连续现象的定位

    MySQL自增主键auto_increment原理 与 自增主键出现间隙不连续现象的定位

    2021年10月5日
    55
  • Device 与 platform device的不同(一)[通俗易懂]

    Device 与 platform device的不同(一)[通俗易懂]Device与platformdevice在注册方法上有所不同。Device注册有两步,platformdevice注册也有两步,它们第一步相同,都是initialize设备,但第二步有所不同,Device是直接调用device_add()函数来add设备,而platformdevice则调用platform_device_add()函数。实际上,platfo

    2022年7月24日
    11
  • idea 最新激活码(破解版激活)

    idea 最新激活码(破解版激活),https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月16日
    421

发表回复

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

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