Swiper component rotation picture right blank problem

The iphone5 preview works fine at first, but when you switch to the iphone6 Plus, there will be a blank space on the right.

First, the original code and effect

Official Swiper component

Developers.weixin.qq.com/miniprogram…

The sample code

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/>
<slider bindchange="durationChange" show-value min="1000" max="10000"/>
Copy the code

Actual renderings

Second, modify,

The sample code sets width and height in the image tag, but this doesn’t seem to work because the image tag doesn’t have these attributes, probably because of the discrepancy between the old and new versions of the official document.

Solution: Write width height in CSS. eg:

style="width:100%"
Copy the code

Another possibility (not encountered) : www.wxapp-union.com/thread-2474…