zoukankan      html  css  js  c++  java
  • 微信小程序轮播图宽高计算

    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{ 

         100%;
        height: calc(100vw * 200 / 640);
     }
     image{
         100%;
     }
    5.给image标签添加mode属性:mode="widthFix"
     宽度100%,高度自适应
  • 相关阅读:
    vue-路由传参
    ES6模板字符串
    es6中Set和Map数据结构
    本周面试题
    var、let和const定义变量的特点
    修改this的指向
    Echarts图表插件
    ES6学习
    swiper插件学习
    每日刷题4
  • 原文地址:https://www.cnblogs.com/x369/p/13748040.html
Copyright © 2011-2022 走看看