1

I'm doing an application using Ionic 5 and ion-slides.

I'm trying to set the image width to 100% to be able to see them more nicer. The image right now has space on the left and right and I don't know how to remove it.

enter image description here

<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>

I have tried:

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

Also, I have tried wrapping the img in a 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;
}

But, there is still space on the left and right.

enter image description here

None of my tries seems to work.

My goal is to set the image width to 100% and keeping the quality of the image.

RRGT19
  • 1,437
  • 3
  • 28
  • 54

0 Answers0