虚拟滚动 ion-img 标签与另一个离子卡重叠

Question

我在虚拟滚动中使用ion-img遇到问题，当我不打算设置ion-img标签的宽度和高度时，它会显示一个小图像。 但是当我在上面设置一些宽度和高度时，它会与另一张不正确的卡片重叠

下面是我正在使用的代码

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

编辑：我忘了提到这是一个错误，仍在解决过程中，但我要求另一种工作来解决这个问题，我不擅长做 css

Answer 1

您必须通过卡片页脚降低图像的高度。 就像是：

img.height -= card.footerHeight