Image is not stretching inside a ion slide, what is going wrong?

Question

I want the image to take all the space but it's not doing so. My scss code:

.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%;
            }
        }


    }

I already tried other suggestions like setting image min-width and min-height, but didn't work. Usually providing the 100% width and height it takes all the space.

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

Finally i set it as a background of a div:

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