Question

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

＆＃13;

<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>

＆＃13;

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

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

Answer 1

您可height !important使用object-fit: cover;来防止覆盖。并设置.card-img{ width: 100%!important; height: 200px!important; object-fit: cover; }：

media-query

看小提琴：https://jsfiddle.net/dhupq0m4/

您可以使用width更改height / media-query
{{1}}：https://www.w3schools.com/css/css3_mediaqueries_ex.asp

Answer 2

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

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

2 个答案: