Showing movies array with ion-slide

I'm working with an app and I want to show an array of movies using the ion-slide component. I want to present the movies like the Netflix app so the movies are all on the same row and the user can scroll horizontal. Using the ions-lider kind of made it already but the styling it's not working at all. The movie images are provided from an external API and are not all the same size but the same with and height proportion. The problem is:

• The movies images doesn't show with the same height.
• They are too close each of each other that they overlap on the another.

I've tried with custom scss rules rather than the default ion-img component styling rules but the result was worse. Now I have it as it comes by default and seems that the only problem i the slider configuration.

The way I have it is that for an array of movies I create an ion-slides and inside there's an iteration for each movie on the array I call a component binding a movie object, that component renders the movie image and the movie title.

The way I'm doing it it's the following:

1. I have an array where each element on this array is an object that contains a collection of movies with a name for the collection, the id of the owner of that collection and an array of id's movies.
2. For each element of the array I call a component called collection this component gets a collection and renders the title of the collections and iterates over the movies id's retrieving the full information about the movie from the API.
3. Inside the collection component, when I've retrieved all the movies information I render the movies image and title using a component called movie-poster that renders the movie image and movie title.

This is where I render all the collections:

   <ion-row *ngIf="reference === 'collections'">
      <ion-col size='12' *ngFor='let collection of results?.collections'>
        <app-collection [collection]='collection'></app-collection>
      </ion-col>
    </ion-row>

This is the collection component:

<ion-slides [options]='slideOpts'>
    <ion-slide *ngFor='let movie of movies'>
      <app-movie-poster [movie]='movie'></app-movie-poster>
    </ion-slide>
  </ion-slides>

And the ions-slides configuration:

slideOpts = {
    slidesPerView: 3.5,
    spaceBetween: 50,
    autoHeight: true
  }

And the movie-poster component:

<ion-img [src]='movie.poster_path | posterImg' (click)='getDetails(movie)'></ion-img>

<h3>
  {{ movie.title }}
</h3>

I don't have any scss rules on any of the components I'm using. This is what I' trying my movies to be shown:

And this is how it's showing for now:

I finally found the solution. No need to set any image width or heigh just setting the number of slides per view and the space between ion-slider sets the image size automatically. This is my slider configuration:

slideOpts = {
    slidesPerView: 2.5,
    spaceBetween: 10,
    autoHeight: true
  }