正确 mat-ccard-header 中的 mat-card-avatar 图像高度

Question

作为个人项目，我正在为我的一个朋友使用 angular 建立一个网站。 它可能会或可能不会直播 go，但我正在做这个项目是为了我自己的个人学习。 在过去的五年中，我一直是 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>

我的问题是，我不明白为什么 header 文本和内容文本都与图像重叠，而不是被它推下。

非常感谢帮忙。

Answer 1

有两种选择可以获取您要查找的内容：

• 选项1 ：使用带有mat-card-avatar的div并从您的 TS 数组中设置背景
• 选项2 ：使用带有mat-card-avatar的img广告设置源

您将<img>放在带有mat-card-avatar的div ...

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