使離子卡適合離子滑動器中的子圖像

Question

我在 Ionic 應用程序中使用 swiperJs 框架。 在這個組件中，使用滑動圖像，我需要離子卡正好適合圖像寬度。

<ion-card>
  <swiper class="horizontal-swiper" [config]="imageSwiperConfig">
    <ng-template swiperSlide *ngFor="let image of images">
      <img class="full-screen-image" src="./assets/{{image}}">
    </ng-template>
  </swiper>
</ion-card>


ion-card {
  border-radius: 2%;
  margin: auto;
  height: 100%;
}

.horizontal-swiper {
  height: 100%;
}

.full-screen-image {
  height: 100%;
  width: auto;
}

public imageSwiperConfig: SwiperOptions = {
  slidesPerView: 'auto',
  preloadImages: true,
  pagination: true,

Answer 1

嘗試將 class .full-screen-image更改為如下所示

.full-screen-image {
  height: 100%;
  width: 100%;
  object-fit: cover;
}