Javascript 虚拟滚动ion img标签与另一个ion卡重叠

我在虚拟滚动中使用

ionimg

时遇到问题，当我不打算设置

ionimg

标签的宽度和高度时，它会显示一个很小的图像。但当我在上面设置一些宽度和高度时，它会重叠到另一张不正确的卡片上

下面是我正在使用的代码

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

-->
{{post.name}
{{post.date_posted}}

{{post.title}

{{post.content}

编辑：我忘了提到这是一个bug，还在解决过程中，但我要求另一个解决这个问题的方法，我不擅长做css

---

您必须将图像的高度减少卡片页脚。比如：

img.height -= card.footerHeight