Question

我正在创建图片库，我需要缩略图部分保持与“大”图片部分相同的高度。为了更加清楚，我录制了一个简短的剪辑：https://www.screenmailer.com/v/9gdopLeaugePvBk。如您所见，“大”图像比缩略图部分略短。我在这里读过其他文章，但没有一个对我有用。

.container {
  max-width: 98%;
  margin: 0 auto;
}

.thumbnail-container {
  height: auto;
  border: 1px solid;
}

.thumbnail-wrapper {
  padding-top: 16px;
  height: auto;
}

.img-holder {
  height: auto;
  margin-bottom: 19px;
  padding-left: 0;
  padding-right: 0;
}

.main-img-wrapper {
  height: auto;
}

.main-img-holder {
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 0;
  height: auto;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<div class="container mt-4">
  <div class="row">
    <!-- Image Section -->
    <div class="col-lg-7 col-md-12 col-sm-12 col-12 card thumbnail-container">
      <div class="row">
        <div class="col-lg-2 col-md-2 col-sm-2 col-2 thumbnail-wrapper">
          <div class="col-12 img-holder"><img src="https://via.placeholder.com/126x85" class="img-fluid"></div>
          <div class="col-12 img-holder"><img src="https://via.placeholder.com/126x85" class="img-fluid"></div>
          <div class="col-12 img-holder"><img src="https://via.placeholder.com/126x85" class="img-fluid"></div>
          <div class="col-12 img-holder"><img src="https://via.placeholder.com/126x85" class="img-fluid"></div>
          <div class="col-12 img-holder"><img src="https://via.placeholder.com/126x85" class="img-fluid"></div>
        </div>
        <div class="col-lg-10 col-md-10 col-sm-10 col-10 main-img-wrapper">
          <div class="col-lg-12 main-img-holder">
            <img src="https://via.placeholder.com/765x500" class="img-fluid">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

看看Bootstrap的flex utilities。您需要的是另一个带有'England' 'wins': 2 'loses' : 1 'draws': 0 'goal difference': 1 'points': 6 'Germany' 'wins': 1 'loses' : 1 'draws': 1 'goal difference': 5 'points': 4 'Spain' 'wins': 1 'loses' : 1 'draws': 1 'goal, difference': 4 'points': 4 'Portugal' 'wins': 0 'loses' : 1 'draws': 2 'goal difference': 0 'points': 2和flex-direction: column的flexbox容器。高度100％也很重要。

对于您的示例，必须将项目包装在左列上，并使用以下实用程序类来实现：justify-content: space-between

d-flex flex-column justify-content-between h-100

响应时如何使图像DIV保持相同的高度？

1 个答案: