首页 > 微信 > 详细

微信小程序轮播图宽高计算

时间:2020-05-13 20:44:24      阅读:1181      评论:0      收藏:0      [点我收藏+]

标签:宽度   样式   swiper   微信小程序   比例   calc   

1.轮播图外层容器swiper,每一个轮播项swiper-item

2.swiper标签存在默认样式

 width 100%  

 height 150px

 image 存在默认宽度和高度 320*240

 swiper 高度无法实现由内容撑开

3.综上,需先根据原图的宽度和高度 等比例给swiper定宽度和高度

 假定:原图宽度和高度为 640 * 200px

 swiper 宽度 / swiper 高度 = 原图的宽度 / 原图的高度

 则 swiper 高度 = swiper 宽度 * 原图的高度 / 原图的宽度

    即 height: 100vw * 200 / 640

4.css样式

 swiper{ 

    width: 100%;
    height: calc(100vw * 200 / 640);
 }
 image{
    width: 100%;
 }
5.给image标签添加mode属性:mode="widthFix"
 宽度100%,高度自适应

微信小程序轮播图宽高计算

标签:宽度   样式   swiper   微信小程序   比例   calc   

原文:https://www.cnblogs.com/ytwanzi/p/12884573.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号