Virtual scroll ion-img tag overlapping to another

Question

I have a problem using ion-img in virtual scroll, when im not going to set the width and height of the ion-img tag it shows a tiny image. But when I set some width and height on it it overlaps to another card which is not right

below is the code that i am using

<ion-list [virtualScroll]="posts" [approxItemHeight]="'150px'">
    <div *virtualItem="let post" style="width: 100%">
      <ion-card class="adv-map">
        <ion-item>
          <ion-avatar item-start>
            <img src="img/marty-avatar.png">
          </ion-avatar>
          </button> -->
          <h2>{{ post.name }} </h2>
          <p>{{ post.date_posted }}</p>
        </ion-item>

          <ion-img [width]="imgWidth" [height]="imgHeight" [src]="post.imagepost_url"></ion-img>
          <ion-fab right top class="fab-map">
            <button (click)="showLocation(post.lattitude,post.longitude,post.title)" ion-fab>
              <ion-icon name="pin"></ion-icon>
            </button>
          </ion-fab>

        <ion-card-content>
          <ion-card-title>
            {{post.title}}
          </ion-card-title>
          <p>
            {{post.content}}
          </p>
        </ion-card-content>
      </ion-card>
          <div style="height:100px"></div>
    </div>
  </ion-list>

EDIT: I forgot to mention that this was bug and still on the process in solving but im asking another work around to fix this problem im not good at doing css

Answer 1

You have to reduce the height of the image by the card footer. Something like:

img.height -= card.footerHeight