Question

这通常不是一个问题，但只是材料2是非常少记录的atm所以我很难使所有图像大小相同，但适当调整窗口更改

当我创建时，我所拥有的所有图像都非常相似，但是其中一个图像的高度更高，但我的旧代码只是通过一些引导调用来调整它。

但是使用mat-card中的图像时，它的长度会更长，因此看起来不合适：

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

只需在代码中添加此样式引用即可。如果要将此样式应用于视图中的所有卡片，请添加到样式文件中：

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

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

Answer 2

只需在图像中添加css-class并从SCSS文件中设置图像样式即可。

<img mat-card-image class="imgs src="{{project.image}}" alt="{{project.title}}">

现在加入SCSS：

imgs {
  height: 50px;
  width: 50px;
}

有关信息的更多信息，请访问W3school.com/image。

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

2 个答案: