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%,高度自适应
  • 相关阅读:
    while循环学习之统计流量
    MySQL的启动脚本
    UVA 725 Division
    UVA 712 S-tree
    UVA 514
    字典树
    UVA 1595 multimap 的应用
    C++ map 和 multimap
    浮点数
    UVA 227
  • 原文地址:https://www.cnblogs.com/x369/p/13748040.html
Copyright © 2011-2022 走看看