html - 如何在 Bootstrap 卡中将图像调整为等长

Question

<!--........PORTFOLIO..........-->  

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<section class="portfolio bg-light">
  <div class="container-fluid text-center">
    <h1>PORTFOLIO</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, voluptates.</p>

    <div class="row">
      <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto">
        <div class="card">
          <img src="Resposive.jpg" class="card-img img-fluid">
          <div class="card-body">
            <h2 class="card-title">Threads</h2>
            <p class="card-text">Illustration</p>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto">
        <div class="card">
          <img src="booking1.jpg" class="card-img img-fluid">
          <div class="card-body">
            <h2 class="card-title">Threads</h2>
            <p class="card-text">Illustration</p>
          </div>
        </div>
      </div>

      <div class="col-lg-4 col-md-4 col-sm-12 col-10 d-block m-auto">
        <div class="card">
          <img src="Resposive.jpg" class="card-img img-fluid">
          <div class="card-body">
            <h2 class="card-title">Threads</h2>
            <p class="card-text">Illustration</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  </div>


</section>

如何在 bootstrap4 卡系统中平均调整图像大小，因为我使用的是不同大小的图像，因此卡的大小也在增加。

请帮我解决这个问题，因为我无法像使用网格系统那样以相同的方式调整卡片的大小。

Answer 1

您可以使用 !important 为您的图像高度 以防止覆盖。并设置 object-fit: cover;:

  .card-img{
   width: 100%!important;
   height: 200px!important;
   object-fit: cover;
}

参见 fiddle :https://jsfiddle.net/dhupq0m4/

你可以使用 media-query 来改变 width/height
媒体查询:https://www.w3schools.com/css/css3_mediaqueries_ex.asp