Изображение не растягивается внутри ионного слайда, что не так?

Question

Я хочу, чтобы изображение занимало все пространство, но это не так. Мой scss код:

.slider-div {

    width: 100%;
    height: 280px;
    position: relative;


    ion-slides {
        position: relative;
        background: black;
        width: 100%;
        height: 100%;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        --bullet-background-active: white;

        ion-slide {
            width: 100%;
            height: 100%;
            ion-img  {
                opacity: 0.6;
                width: 100%;
                height: 100%;
            }
        }


    }

Я уже пробовал другие предложения, такие как установка минимальной ширины и минимальной высоты изображения, но не сработал. Обычно для обеспечения 100% ширины и высоты требуется все пространство.

My HTML:

<div class="slider-div">
  <ion-slides pager (ionSlideDidChange)="slideChanged()">
    <ion-slide *ngFor="let item of sortedList; let i = index">
      <ion-img class="image" [src]="item.url" *ngIf="item.type == 0"></ion-img>
    </ion-slide>

  </ion-slides>

  </div>

Answer 1

Наконец я установил его как фон для div:

<div class="image" *ngIf="item.type == 0" [style.background-image]="'url(' + item.url + ')'"></div>