问题:如下图,swiper轮播图两侧会有留白,没有撑满swiper
失败的尝试:
1.调整图片尺寸
2.设属性设置image的mode为scaleToFill
3.设置item的属性
都没能实现将图片填充满轮播图,图片会有右侧和底部两块留白

通过调试器查看到image区域很小,怀疑是image本身属性的问题

随后尝试在wxss文件中给image创建了一个宽高都是100%的class后,解决了问题,image本身就回去占满100%的父容器的宽高

代码方式如下:
.wxss代码
.s-i-image{
height: 100%;
width: 100%;
}
.wxml代码
<swiper-item>
<image class="s-i-image" src="/resource/2.png"/>
</swiper-item>

文章讲述了作者在使用Swiper轮播图时遇到图片未完全填充的问题,通过调整图片尺寸、模式设置和分析发现是image本身的属性问题。最终通过在wxss中设置image的高度和宽度为100%,成功实现了图片充满轮播图的效果。
最低0.47元/天 解锁文章
1396

被折叠的 条评论
为什么被折叠?



