漫画Web应用中如何让mat-card在封面宽高比不同时保持统一尺寸

现有代码的核心问题根因 #

• 高度计算逻辑完全走反了：给.coverImage设的height: 80%本来想相对于卡片算高度，但mat-card本身没有固定高度，总高度全靠内部内容撑开——等于图片高度要靠卡片高度算，卡片高度要靠图片高度撑，最后算下来的结果完全取决于图片本身的实际大小。一旦碰到非竖版、高度更矮的封面，整个卡片就会跟着收缩，同排的卡片就高低不齐。
• 类名拼错了：mat-card-actions上写的类是actionsButtons，多了个s，和CSS里写的.actionButtons根本对不上，按钮居中的样式从来没生效过。
• 类名重复套着用：外层包图片的div和里面的img都挂了.coverImage类，两个元素的样式互相覆盖，根本达不到预期效果。

具体修复步骤 #

1. 调整CSS结构，统一卡片固定尺寸 #

.bookCard {
  width: 50%;
  /* 给所有卡片设统一固定高度，从根源上避免内容撑动卡片尺寸 */
  height: 450px;
  /* 让卡片内部按纵向flex排布，明确各区域高度占比 */
  display: flex;
  flex-direction: column;
}

.coverImage {
  /* 去掉之前错误的height:80%设置，让封面区自动占满卡片除header、按钮区外的剩余空间 */
  flex: 1;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 单独给内部img设置样式，不再和外层容器共用类名 */
.coverImage img {
  width: 100%;
  height: 100%;
  /* 保持原有裁切逻辑，让不同比例的图片适配固定容器 */
  object-fit: cover;
  display: block;
}

.actionButtons {
  /* 固定按钮区高度，避免按钮位置随卡片高度变动 */
  padding: 8px 0;
  text-align: center;
}

2. 修正HTML代码的类名错误 #

去掉重复的类名挂载、修正拼写错误、替换为更稳定的属性绑定写法：

<mat-card class="bookCard">
  <mat-card-header>
    <mat-card-title>{{book.title}}</mat-card-title>
    <mat-card-subtitle>@{{book.path}}</mat-card-subtitle>
  </mat-card-header>
  <div class="coverImage">
    <img mat-card-image [src]="book.cover" alt="Manga Cover Image">
  </div>
  <!-- 修正类名拼写，和CSS定义的.actionButtons对齐 -->
  <mat-card-actions class="actionButtons">
    <button mat-raised-button color="secondary">Edit</button>
    <button mat-raised-button color="primary">Read</button>
  </mat-card-actions>
</mat-card>

修复效果说明 #

• 所有mat-card都会保持统一的450px固定高度，不会因为封面图的比例、尺寸差异出现收缩、不齐的问题。
• 内部布局通过flex纵向分配空间：标题区用自身内容高度，按钮区保持固定高度，中间封面区自动填充剩余空间，不同比例的封面图会通过object-fit: cover在固定区域内裁切适配，不会撑动卡片尺寸。
• 这套结构后续做响应式适配时，只需要根据屏幕断点调整.bookCard的宽度、固定高度值即可，不需要改动内部布局逻辑。

内容的提问来源于stack exchange，提问作者nlanson