1

我正在使用 Ionic 5 和ion-slides做一个应用程序。

我正在尝试将图像宽度设置为 100%,以便能够更好地看到它们。现在的图像左右两边都有空间,我不知道如何删除它。

在此处输入图像描述

<ion-content>

  <ion-slides [options]="slideOpts" pager>
    <ion-slide *ngFor="let i of menu.images">
      <img [src]="i" alt="">
    </ion-slide>
  </ion-slides>

</ion-content>

我努力了:

// Method 1
ion-slides {
  ion-slide >:first-child {
    width: 100%;
  }
}

// Method 2
ion-slide >:first-child {
  width: 100%;
}

// Method 3
ion-slide {
  width: 100%;
}

// Method 4
ion-slide img {
  width: 100%;
}

另外,我尝试将 img 包装在 div 中:

<ion-slides [options]="slideOpts" pager>
    <ion-slide *ngFor="let i of menu.images">
      <div class="slide-img">
        <img [src]="i" alt="slide"/>
      </div>
    </ion-slide>
  </ion-slides>

// And
.slide-img {
  width: 100% !important;
}

但是,左右还有空间。

在此处输入图像描述

我的任何尝试似乎都不起作用。

我的目标是将图像宽度设置为 100% 并保持图像质量。

4

0 回答 0