Как сделать так, чтобы изображения DIV имели одинаковую высоту при отзывчивости?

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

Взгляните на flex утилиты Bootstrap.Вам нужен еще один контейнер flexbox с flex-direction: column в сочетании с justify-content: space-between.Также важна высота 100%.

Для вашего примера необходимо обернуть элементы в левом столбце и использовать следующие служебные классы для достижения этого: d-flex flex-column justify-content-between h-100

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>

<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="d-flex flex-column justify-content-between h-100">
            <div class="img-holder"><img src="https://via.placeholder.com/126x85" class="img-fluid"></div>
            <div class="img-holder"><img src="https://via.placeholder.com/126x85" class="img-fluid"></div>
            <div class="img-holder"><img src="https://via.placeholder.com/126x85" class="img-fluid"></div>
            <div class="img-holder"><img src="https://via.placeholder.com/126x85" class="img-fluid"></div>
            <div class="img-holder"><img src="https://via.placeholder.com/126x85" class="img-fluid"></div>
          </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>