之前从来没有接触过前端，最近开始学习微信小程序，因为没有基础所以学起来有点难度。在学习这个swiper标签的时候遇到了一些问题。首先一个问题就是轮播图中的图片显示不全，尽管已经给image设置成了widthFix、width:“100%”，图片也没有锁定高宽比。
而且随着机型的改变，图片的高度方面显示的越来越少。乔巴缓缓下线？？
后面用了很多方法，发现图片在高度上仍然是显示不全的。
其实是笔者忽视了swiper的一个小细节，那就是swiper标签存在着默认的样式。
swiper 滑块视图容器
首先swiper标签的宽度 width:“100%”swiper标签存在默认高度height：150px这也就能解释为什么上面随着机型的改变，图片高度的显示越来越小了swiper标签的高度无法实现由内容撑开在默认情况下，图片的高度显示总是150px为了使轮播图的高度宽度自适应，我们要重新确定swiper标签的高度。
swiper 宽度 / swiper 高度 = 原图宽度 / 原图高度
找出原图片的宽度和高度，通过比例计算出swiper标签的高度，因此
swiper 高度 = swiper 宽度 * 原图高度 / 原图宽度
那么我们只需要在.wxss文件中加入这段代码就可以啦~
swiper{width: 100%;height: calc(100vw*9/16);}
此时轮播图已经实现高度宽度自适应了，乔巴上线了，o(￣▽￣)ブ~
如果觉得《微信小程序 swiper轮播图高度宽度自适应（解决轮播图图片显示不全问题）》对你有帮助，请点赞、收藏，并留下你的观点哦！
