Question

作为个人项目，我正在为我的一个好友使用angular创建一个网站。它可能会上线，也可能永远不会上线，但是我正在为自己的个人学习做项目。在过去的五年中，我一直是Web应用程序测试人员，但仅在少数情况下才发展。因此，如果我天真的幼稚或缺乏经验，我深表歉意。

我有一系列席位卡，我正在将有关我省周围中心的信息（地址，电话号码等）放入其中，并且我想将每个中心的徽标/图像都包括在席位卡头像中。现在，我有这个：我的HTML在这里：

  <mat-card class="centres-card" *ngFor="let centre of centres">
    <mat-card-header fxLayout fxLayoutAlign="start center">
      <div mat-card-avatar>
        <img class="avatar" src="{{centre.img}}">
      </div>
      <mat-card-title>{{centre.name}}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <p>
        {{centre.streetAddress}}
        <br>
        {{centre.city}}, {{centre.province}}
        <br>
        {{centre.postalCode}}
      </p>
    </mat-card-content>
  </mat-card>
</div>

我的问题是，我不明白为什么标题文本和内容文本都与图像重叠，而没有被其压低。

非常感谢您的帮助。

Answer 1

有两种选择可满足您的需求：

选项 1 ：将div与mat-card-avatar一起使用并设置背景从您的TS阵列
选项 2 ：将img与mat-card-avatar广告集一起使用来源

您正在将<img>和div放在mat-card-avatar内...

相关HTML ：

<h2>Option 1</h2>
<div *ngFor="let centre of centres">
    <mat-card class="centres-card">
        <mat-card-header fxLayout fxLayoutAlign="start center">
            <div mat-card-avatar class="example-header-image"
                [ngStyle]="{'background-image': 'url(' + centre.img + ')'}">
            </div>
            <mat-card-title>{{centre.name}}</mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <p>
                {{centre.streetAddress}}
                <br>
        {{centre.city}}, {{centre.province}}
                <br>
        {{centre.postalCode}}
      </p>
        </mat-card-content>
    </mat-card>
</div>

<h2>Option 2</h2>
<div *ngFor="let centre of centres">
    <mat-card class="centres-card">
        <mat-card-header fxLayout fxLayoutAlign="start center">
            <img mat-card-avatar src="{{centre.img}}">
            <mat-card-title>{{centre.name}}</mat-card-title>
        </mat-card-header>
        <mat-card-content>
            <p>
                {{centre.streetAddress}}
                <br>
        {{centre.city}}, {{centre.province}}
                <br>
        {{centre.postalCode}}
      </p>
        </mat-card-content>
    </mat-card>
</div>

相关CSS ：

.example-header-image {
  background-size: cover;
}

工作stackblitz here

正确在垫卡头中的垫卡头像图像高度

1 个答案: