如何在引导程序中为不同尺寸的图像和标题长度制作相同尺寸的 div答案

【问题标题】：How to make same size div for diff size image and title length in bootstrap如何在引导程序中为不同尺寸的图像和标题长度制作相同尺寸的 div
【发布时间】：2023-01-14 09:12:39
【问题描述】：

我正在从事一个有角度的项目，我正在获取图像、标题和位置的数据。我试图制作一个响应式 div 但无法将它们制作成一种尺寸。

      <div *ngFor="let company of companies" class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-12">
        <div class="card">
          <div class="card-content">
            <div class="card-body py-0 text-center">
              <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}}">
                <div class="row justify-content-center">
                  <div class="col-12" style="height: 6rem ; display:table-cell; vertical-align: middle;">
                    <img  src="{{company.logo}}"  class="mt-1 img-fluid mh-100" alt="Image 1">
                  </div>
                  <div class="col-12 mt-2" style="min-height: 3rem;font-size: 12px;text-transform: none;">
                    <span>{{company.company}}</span>
                  </div>
                  <div class="col-12 mt-1" style="min-height: 2.5rem;font-size: 12px;text-transform: none;">
                    <span>{{company.country}}</span>
                  </div>
                </div>

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

company.logo 是图片路径，company.company 是公司名称。我想使图像在垂直和水平对齐中心，如果公司名称长度是新行，它会更改所有 div 的大小。

【问题讨论】：

标签： css angular bootstrap-5

【解决方案1】：

你不需要完全引导程序来做到这一点，你可以使用 JavaScript 来获得你想要的 div 面并应用为宽度 + 高度。

您也可以使用 CSS，例如：

width: 100%

【讨论】：