Fit ion-card to child image in ionic swiper

Question

I'm using the swiperJs framework inside a Ionic application. In this component, with sliding image, i need the ion-card fit exactly the image width.

<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

try changing the class .full-screen-image to be like below

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