离子幻灯片的问题

Question

我想制作显示图像的离子幻灯片，但我只能显示一张图像而其他图像位于左侧，当我试图看到它时，我只能看到一半，如果我按下按钮我会变白空间

 <ion-slides pager="true">
    <ion-slide background-size *ngFor="let item of Offer" [ngStyle]="{'background-image': 'url(' + item.PICPATH + ')'}">

    </ion-slide>
  </ion-slides>

Answer 1

使用CSS可以做到

.bg{
 height:100%;
 width:100%;
 background-size: cover;
 background-repeat: no-repeat;
 background-position: 50% 50%;
}

并在您的HTML中

<ion-slides pager="true">
    <ion-slide>
     <div class="bg" *ngFor="let item of Offer" [ngStyle]="{'background-image': 'url(' + item.PICPATH + ')'}></div>
    </ion-slide>
  </ion-slides>

这将确保图像正确适合ion-slide