Equal height children images in responsive Bootstrap 4 columns. How to? - flexbox

Question

Using Bootstrap 4, I'd like to create 3 columns that adjust their width so that padding of each column is consistent and the height of each image is consistent between each column. The goal is for the width and height of each image to increase/decrease as page width changes. Notice, the height of the images and columns should always be synced. I know I can use percentages, but I was hoping there was a flexbox solution. Thanks
Codepen: https://codepen.io/danielgetsthis/pen/qJgyNx
<div class="container">
<div class="row">
<div class="col">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>

Answer 1

I'm not sure that I understand the height issue. The columns and images are the same height. To equalize the padding around the images use col-auto instead of col. This makes the columns shrink to fit the width of their content.
<div class="container">
<div class="row justify-content-center">
<div class="col-auto">
<a href="#" class="text-center">
<span>1</span>
<img src="http://placehold.jp/100x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>2</span>
<img src="http://placehold.jp/200x100.png" />
</a>
</div>
<div class="col-auto">
<a href="#" class="text-center">
<span>3</span>
<img src="http://placehold.jp/300x100.png" />
</a>
</div>
</div>
</div>
https://www.codeply.com/go/XtNGjb765u

Answer 2

body{
background-color: #eee;
box-sizing: border-box;
}
.col {
display: flex;
flex: 0;
flex-direction: initial;
}
.col a {
display: flex;
flex-wrap: wrap;
padding: 10%;
background-color: tomato;
border: 1px solid green;
color: #FFF;
font-size: 26px;
justify-content: center;
}
span{
display: block;
text-align:center;
}