如何在引导卡中以相同的长度调整图像大小

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

你可以使用height为你的图像加密，以防止覆盖。并设置!important：

object-fit: cover;

看小提琴：

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

你可以使用https://jsfiddle.net/dhupq0m4/来改变media-query / width height：media-query

Answer 2

卡片大小不相等，因为它没有相同大小的内容或相同大小的图像。使用“高度”强制图像处于相同高度，或者可以将图像裁剪为相同的高度。拥有相同高度的图像，因为它不会破坏图像的外观。如果强制图像占据高度，那么您将无法获得良好的图像效果。