How to create nested swiper with swiperjs in ionic angular

I’m trying to build an app where the main page has a set of ion-card. Just one card is displayed on the screen and trough vertical scroll the user can reveal other card (as in instagram with posts).
Every card can have several images. Just one image at time is showed in full screen inside the card and thought horizontal swipe other images are showed. I built a specific component for the card called item-card. Basically there’re two nested swiper (vertical and horizontal).

tab files:

<swiper class="vertical-swiper" [config]="itemVerticalSwiperConfig">
    <ng-template swiperSlide class="company-slide" *ngFor="let image of images">
      <app-item-card class="item-card"></app-item-card>
.vertical-swiper {
  height: 100%;

.company-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

.item-card {
  height: 93% !important;
  public itemVerticalSwiperConfig: SwiperOptions = {
    slidesPerView: 1,
    direction: 'vertical',
    spaceBetween: 25,

item-card component files:

  <swiper class="horizontal-swiper" [config]="imageSwiperConfig">
  <ng-template class="hor-slide" swiperSlide *ngFor="let image of images">
      <img class="full-screen-image" src="./assets/{{image}}" alt="">
.full-screen-image {
  height: 100%;
  object-fit: cover;

ion-card {
  border-radius: 2%;
  height: 100%;
  margin: auto;
  width: auto;

.horizontal-swiper {
  height: 100%;
  public imageSwiperConfig: SwiperOptions = {
    slidesPerView: 'auto',
    spaceBetween: 0,

At the moment the ion-card seems not fit properly on the image so there’s a margin between the image and the border of the card, as you can see from the following screenshots.

I need the card to be fitted on the image an centered horizontally and vertically in the screen.
Can someone help me in solving this problem ?
Thank you very much in adavance and sorry for my bad English.
I tried to explain at my best :slight_smile:

By adding height and width using css you can close the gap.

I can’t use a px measure since it have to run on different screens with different size and resolution (if this’s what you mean)

Ok. I’ve never had a problem with using px for ANY screen but if you insist, this may help.

It wasn’t my intention to criticise your answer. Probably I don’t know how to set properly the px on the right html element. If you could provide me some more info on how to do that I’d be extremely grateful.
Sorry I’m a beginner in Ionic and Angular development.