Question

我正在使用Bootstrap卡，并且图像大小不同。我需要这些图像具有相同的高度，避免使用style=fixed height（因为它会使图像看起来很糟）。

这是我当前的代码： code pen

Answer 1

您可以使用：

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container-fluid mt-3">
            <div class="row">
                <div class="card-deck">
                    <div class="col-sm-6 col-md-4">
                        <div class="card">
                            <img class="card-img-top fix-height" src="https://images.unsplash.com/photo-1485846234645-a62644f84728?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=740&q=80" alt="Card image cap">
                            <div class="title1">
                                <h5 class="card-title m-auto">Card title</h5>
                            </div>
                        </div>
                    </div>

                <div class="col-sm-6 col-md-4">
                    <div class="card">
                        <img class="card-img-top fix-height"  src="https://images.unsplash.com/photo-1461151304267-38535e780c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=890&q=80" alt="Card image cap">
                        <div class="title1">
                            <h5 class="card-title m-auto">Card title</h5>
                        </div>
                    </div>
                </div>

                <div class="col-sm-8 col-md-4">
                    <div class="card">
                        <img class="card-img-top fix-height" src="https://images.unsplash.com/photo-1546483875-ad9014c88eba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=674&q=80" alt="Card image cap">
                        <div class="title1">
                            <h5 class="card-title m-auto">Card title</h5>
                        </div>
                    </div>
                </div>

                </div> <!-- Card deck -->
            </div> <!-- Row -->
        </div> <!-- Container -->

CSS

.fix-height{
height:190px;
}

Answer 2

您可以尝试以下操作，但是它会裁剪图像。

img {
  object-fit:cover;
  height: 100%;
}

Answer 3

对img使用height:100%;object-fit:cover属性。图像将根据高度缩放以适合卡片

img {
  height:100%;
  object-fit:cover;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container-fluid mt-3">
  <div class="row">
    <div class="card-deck">
      <div class="col-sm-6 col-md-4">
        <div class="card">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1485846234645-a62644f84728?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=740&q=80" alt="Card image cap">
          <div class="title1">
            <h5 class="card-title m-auto">Card title</h5>
          </div>
        </div>
      </div>

      <div class="col-sm-6 col-md-4">
        <div class="card">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1461151304267-38535e780c79?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=890&q=80" alt="Card image cap">
          <div class="title1">
            <h5 class="card-title m-auto">Card title</h5>
          </div>
        </div>
      </div>

      <div class="col-sm-8 col-md-4">
        <div class="card">
          <img class="card-img-top" src="https://images.unsplash.com/photo-1546483875-ad9014c88eba?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=674&q=80" alt="Card image cap">
          <div class="title1">
            <h5 class="card-title m-auto">Card title</h5>
          </div>
        </div>
      </div>

    </div>
    <!-- Card deck -->
  </div>
  <!-- Row -->
</div>
<!-- Container -->

引导程序-图像卡高度相同

3 个答案: