微信小程序swiper图片尺寸_微信小程序swiper组件中的img自定义尺寸（自适应）

swiper组件里的image默认宽度320，高度200，这无法满足我们的需求，就需要我们自己修改尺寸和属性了，这里记录下自己的解决办法。首先给image的width设置为100%，此时图片的大小会根据屏幕宽度自动适应大小了。height默认为200，如果需要调整的话直接设置到合适的尺寸即可。另外还有一个属性很重要，就是mode属性，mode有13种模式，具体文档中有介绍，这里不再阐述；我是使用widthFix，宽度不变，高度自动变化，并且保持原图宽高比不变。

这里展示一下使用widthFix的前后效果：

使用前：

使用后：

很明显，没有使用widthFix之前，图片是被拉伸导致变形的；使用之后，图片会等比例等缩放显示。

wxml：

indicator-dots="true"

autoplay="true"

interval="true"

duration="true"

interval="3000"

class="swiperHome"

>

wxss：

.swiperHome {

height: 230px;

}

.slide-image {

width: 100%;

}