在Bootstrap中实现不同图片及标题长度的等宽等高Div

核心调整方向 #

• 强制所有卡片高度统一，不受内容长度影响
• 用Flex布局实现图片精准垂直水平居中
• 固定文本区域高度并处理溢出，避免换行导致卡片尺寸波动

修改后的代码 #

<div *ngFor="let company of companies" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
  <div class="card h-100">
    <div class="card-content h-100">
      <div class="card-body py-0 text-center d-flex flex-column h-100">
        <input 
          [checked]="true" 
          type="radio" 
          formControlName="scope" 
          (click)="nextFormPostion(nextFormPostionName)" 
          (change)="nextFormPostion(nextFormPostionName)" 
          id="img{{company.scope}}" 
          class="d-none imgbgchk" 
          [value]="company.scope"
        >
        <label for="img{{company.scope}}" class="d-flex flex-column h-100 justify-content-center">
          <div class="logo-container mb-2">
            <img 
              [src]="company.logo"
              class="img-fluid" 
              [alt]="company.company"
            >
          </div>
          <div class="company-name mb-1">
            <span>{{company.company}}</span>
          </div>
          <div class="company-country">
            <span>{{company.country}}</span>
          </div>

          <div class="tick_container">
            <div class="tick"><i class="fa fa-check"></i></div>
          </div>
        </label>
      </div>
    </div>
  </div>
</div>

配套样式（建议放在组件CSS或全局样式文件） #

/* 确保卡片及内部容器占满高度 */
.card, .card-content, .card-body, label {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* 图片容器：固定高度+Flex居中，保证图片比例 */
.logo-container {
  height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.logo-container img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
}

/* 公司名称区域：固定高度+溢出省略，避免撑高卡片 */
.company-name {
  min-height: 3rem;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

/* 地区区域：固定高度+居中对齐 */
.company-country {
  min-height: 2.5rem;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 可选：统一响应式列间距 */
.col-xl-2, .col-lg-3, .col-md-4, .col-sm-6, .col-12 {
  padding: 0.5rem;
}

关键调整说明 #

1. 统一卡片高度：给.card添加h-100（Bootstrap内置类），强制所有卡片占满所在列的高度，彻底解决内容长短导致的尺寸不一致问题。
2. 图片居中优化：用Flex布局替代table-cell方案，配合object-fit: contain保证图片比例不拉伸，同时避免溢出容器。
3. 文本区域稳定：给名称和地区容器设置min-height，并添加多行文本溢出省略逻辑，即使名称过长换行，也会被限制在固定高度内。
4. Angular绑定优化：将插值表达式替换为属性绑定（[src]、[value]），符合框架最佳实践，同时避免潜在的XSS风险。

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