css - 使 mat-card-image 中的所有图像大小相同但正确缩放

Question

这通常不是问题，但只有 Material 2 在 atm 中的记录非常少，所以我无法将所有图像设置为相同大小，但可以根据窗口更改适当调整大小

我当时创建的所有图像在尺寸上都非常相似，但有一个在高度方面稍长一些，但我的旧代码只是通过一些 Bootstrap 调用对其进行了调整。

但是使用垫卡中的图像，它的长度更长，因此看起来不合适:

BAC 计算器的图像比其他的长，所以它看起来不合适并且将其他计算器推到它下面不成比例或强制一个空单元格，这是我对显示这些的呼吁:

<div *ngIf="data;else other_content">
    <div class="row">
      <div *ngFor="let project of data" class="col-md-6">
        <div>
          <mat-card class="mat-elevation-z4">
            <mat-card-header>
              <div mat-card-avatar class="example-header-image"></div>
              <mat-card-title>{{project.title}}</mat-card-title>
              <mat-card-subtitle>{{project.category}}</mat-card-subtitle>
              <div class="grow-empty"></div>
              <div *ngIf="project.source">
                <button mat-raised-button (click)="openSite(project.source)">SOURCE</button>
              </div>
            </mat-card-header>
            <img mat-card-image src="{{project.image}}" alt="{{project.title}}">
            <mat-card-content>
              <p>
                {{project.detail  | slice:0:250}}...
              </p>
            </mat-card-content>
            <mat-card-actions>
              <button mat-raised-button>Information</button>
            </mat-card-actions>
          </mat-card>
        </div>
        <br>
      </div>
    </div>
  </div>

如果我将高度设置为像“300”这样的静态值，它在技术上解决了这个问题，但重新缩放只会毁了它

我希望它像现在一样是固定比例，但拍摄任何图像并将其放大/缩小以适合卡片本身的尺寸(例如 Callum.Tech 卡片)

Answer 1

只需在您的代码中添加此样式引用即可。 如果您想将此样式应用于 View 中的所有卡片，请添加到您的样式文件:

mat-card img{
  object-fit: cover; /*this makes the image in src fit to the size specified below*/
  width: 100%; /* Here you can use wherever you want to specify the width and also the height of the <img>*/
  height: 80%;
}

这个问题的另一个解决方案可能是使用 Bootstrap 类“img-responsive”。 Here is a brief description