如何为Angular Material Tab设置图片标签并自定义高度？

你的代码已经实现了在标签中插入图片，但Angular Material的<mat-tab-label>默认带有固定高度、内边距等样式限制，导致标签无法自适应图片高度。可以通过以下步骤调整：

1. 给标签组添加自定义类，方便样式定位
   修改你的模板代码，给<mat-tab-group>加上自定义类，并给图片添加类名：

<mat-tab-group dynamicHeight class="image-tab-group">
  <mat-tab> 
    <ng-template mat-tab-label>
      <img src="assets/prueba.jpg" class="tab-image"/>
    </ng-template>
    Content 1 
  </mat-tab>
</mat-tab-group>

2. 覆盖默认样式实现自适应
   在全局样式文件（如styles.scss）中添加以下样式，或者在组件样式中用::ng-deep包裹（注意组件样式隔离的影响）：

/* 重置标签容器的固定高度和内边距 */
.image-tab-group .mat-tab-label {
  height: auto !important;
  min-height: unset !important;
  padding: 0;
}

/* 清除标签内容容器的内边距 */
.image-tab-group .mat-tab-label-content {
  padding: 0;
}

/* 确保图片正确显示，避免底部空白 */
.tab-image {
  display: block;
  max-width: 100%;
}

3. 可选：调整选中标签的下划线样式（按需使用）
   如果希望选中标签的下划线贴合图片底部，可以添加额外样式：

.image-tab-group .mat-tab-header {
  border-bottom: none;
}

.image-tab-group .mat-tab-label-active {
  position: relative;
}

.image-tab-group .mat-tab-label-active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #1976d2; /* 可替换为你的主题色 */
}

这样修改后，标签容器会根据图片的实际高度自动调整，实现高度匹配。

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