How to make image DIVs take the same hight when responsive? - html

Question

I'm creating an image gallery and I need my thumbnail section to stay the same height as my "big" image section. To make this clearer I recorded a short clip: https://www.screenmailer.com/v/9gdopLeaugePvBk . As you can see, the "big" image gets slightly shorter than the thumbnail section. I've read other posts here but none have worked for me.
.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

Take a look at the flex utilities of Bootstrap. What you need is another flexbox container with flex-direction: column in combination with justify-content: space-between. A height of 100% is important too.
For your example it's necessary to wrap the items on the left column and use the following utility classes to achieve this: 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>