虚拟滚动条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