Equal height grid in Bootstrap with multiple dimension images with Flexbox - html

Question

I have various images of different dimensions that need to be the same height within a bootstrap grid.
How can I replicate this equal size display in Bootstrap? I have tried "flex 1" on the child items with no joy and "flex: 1 0 0%;" used at source and a few other equal height tutorials on the web with no joy.
I think the solution here is making equal sized rectangle divs, but interested in the way of getting equal height divs with flexbox of all proportions too.

Answer 1

If you control the image files, your best option is probably going to be manually cropping the images into the correct dimensions.
If you don't control the source images (if you're loading from a remote service such as instagram as in the demo), then you'll get the best results by setting an explicit height on your divs and then loading the images as backgrounds with background-size: cover;.
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

Answer 2

They basically have a wrapper that has all those rows inside it with a fixed responsive width (media queries they define a fixed width for each screen size) and display:flex/flex-direction:column to those rows stack on top of each other, then those rows are also flexed, with flex-direction:row unlike your code each row has 3 divs those div has flex:1 0 0% so they split the width evenly,and of them each have an img inside each img has a set of defined sizes in the srcset attribute which have equal heights.
So you see the fixed width on the wrapper is divided between the children, and the height is defined by the images.
example below
I splitted your example into two rows each with 3 images, instead of doing the same thing they did with srceset attribute to make the images responsive, i'm just gonna give them a fixed height, for the sake of this explanation.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
max-width: 935px !important;
/* Because in here bootsrtap comes after the editor css*/
}
.container>.row {
display: flex;
flex-direction: row;
}
.container>.row>div {
flex: 1 0 0%;
}
.container>.row>div img {
max-width: 100%;
height: 293px;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<div class="container">
<h1 class="my-4 text-center text-lg-left"></h1>
<div id="" class="row text-center text-lg-left">
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjiCy5uDPHp/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjhw_0DDAKB/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjhXUb5DVo4/media/?size=l" alt="">
</a>
</div>
</div>
<div id="" class="row text-center text-lg-left">
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/BjhF2fDjc6E/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjgz6KJDw2S/media/?size=l" alt="">
</a>
</div>
<div class="col-lg-4 col-sm-6">
<a href="" class="d-block mb-4 h-100" target="_blank">
<img class="img-fluid img-thumbnail" src="https://www.instagram.com/p/Bjggi3mjTxf/media/?size=l" alt="">
</a>
</div>
</div>
</div>