解决小程序轮播图swiper的宽高自适应小技巧 亲测有效

轮播图尺寸：713*300

第一种办法：

wxml

    <swiper class="banner" indicator-dots='true' mode="widthFix" indicator-color='#333' indicator-active-color='#f30' autoplay='true'>
     <swiper-item> 
     <image src='/images/1.1.jpg' ></image>
     </swiper-item>
     <swiper-item> 
     <image src='/images/1.1.jpg'></image>
     </swiper-item>
     <swiper-item> 
     <image src='/images/1.1.jpg' ></image>
     </swiper-item>
    </swiper>

效果图：

然后我们在wxss中加入样式

.banner{
  height: 300rpx;
}
.banner image{
  width: 100%;
  height: 300rpx;
}
/*300rpx是轮播图尺寸高，rpx可以根据屏幕宽度进行自适应*/

效果图是不是比之前好多了

换个尺寸大的看看

再换个尺寸试试

第二种办法

wxml

    <swiper class="banner" indicator-dots='true' mode="widthFix" indicator-color='#333' indicator-active-color='#f30' autoplay='true'>
     <swiper-item> 
     <image src='/images/1.1.jpg' mode="widthFix" ></image>
     </swiper-item>
     <swiper-item> 
     <image src='/images/1.1.jpg' mode="widthFix"></image>
     </swiper-item>
     <swiper-item> 
     <image src='/images/1.1.jpg' mode="widthFix"></image>
     </swiper-item>
    </swiper>

使用mode模式：widthFix
widthFix：宽度不变，高度自动变化，保持原图宽高比不变。
首先设置image的mode为widthFix，再给图片加一个固定rpx的宽度，比如：730rpx。
这样图片也可以自适应了。。因为小程序的rpx本身就是一个自适应显示的单位

wxss

swiper{
  height: 300rpx;
  width: 750rpx;
}
swiper image{
  width: 100%;
}

效果:

第三种方法

wxml

    <swiper class="banner" indicator-dots='true' mode="widthFix" indicator-color='#333' indicator-active-color='#f30' autoplay='true'>
     <swiper-item> 
     <image src='/images/1.1.jpg' mode="widthFix" ></image>
     </swiper-item>
     <swiper-item> 
     <image src='/images/1.1.jpg' mode="widthFix"></image>
     </swiper-item>
     <swiper-item> 
     <image src='/images/1.1.jpg' mode="widthFix"></image>
     </swiper-item>
    </swiper>

wxss

swiper{
  height: 300rpx;
  width: cacl(100vw*300/713)
}
swiper image{
  width: 100%;
}

原理等比例公式：原图高度 / 原图高度 = swiper宽度 / swiper高度

swiper高度= 100% * 原图高度/原图宽度

效果图：