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

Posted 2023-03-06

【中文标题】使 mat-card-image 中的所有图像大小相同但缩放正确

【英文标题】：Make all images in mat-card-image same size but scale correctly

【发布时间】：2018-04-01 04:26:53

【问题描述】：

这通常不是问题，但只有 Material 2 的 atm 记录非常不足，所以我无法将所有图像设置为相同大小，但可以通过窗口更改正确调整大小

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

但使用垫卡中的图像长度较长，因此看起来不合适：

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" >
            <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 卡片）

【问题讨论】：

不确定我是否完全理解了这个问题，个人资料图片的 BAC 图像是什么？您在哪个 div 类中显示它？

右下角的图片，比其他的大，因为我的比较大，我希望它们都一样大

【参考方案1】：

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

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%;

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

【讨论】：

这仍然会导致图像比其他图像大，我害怕

这帮我解决了一个完全不相关的问题，所以有一个糖果:)

【参考方案2】：

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

<img mat-card-image class="imgs src="project.image" >

现在在 SCSS 中：

imgs 
  height: 50px;
  width: 50px;

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