微信小程序Swiper组件轮播图片尺寸填坑

最新推荐文章于 2023-01-17 12:05:17 发布

原创最新推荐文章于 2023-01-17 12:05:17 发布 · 5.7k 阅读

2 ·

CC 4.0 BY-SA版权

本文探讨了在Swiper组件中设置图片尺寸的方法，详细解释了如何通过设置宽高为100%来确保图片完全显示，同时介绍了两种图片标签的正确写法。

1.swiper图片尺寸

<!--pages/item/item.wxml-->
<view>
<swiper>
  <swiper-item>
    <image src="/images/timg.jpg" style="width:100;height:100%;"></image>
  </swiper-item>
</swiper>
</view>

当未设置swiper组件属性时，仅设置轮播图片的尺寸大小时，宽高均设置为100%，会压缩图片使之完全显示，其宽高为swiper组件的默认宽高。

2.图片标签的写法，类似于正常标签和空标签，这两种都可以正常显示图片。

<image class="food_image" mode="aspectFill" src="../../images/duck.jpg"></image>

<image class="food_image" mode="aspectFill" src="../../images/duck.jpg" />