如何使图像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

看看 Bootstrap 的 flex 实用程序。您需要的是另一个带有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>