Изображения детей одинаковой высоты в адаптивном Bootstrap 4 столбца.Как?

Question

Используя Bootstrap 4, я хотел бы создать 3 столбца, которые регулируют их ширину таким образом, чтобы заполнение каждого столбца было одинаковым, а высота каждого изображения - согласованным для каждого столбца. Целью является увеличение / уменьшение ширины и высоты каждого изображения при изменении ширины страницы. Обратите внимание, что высота изображений и столбцов всегда должна быть синхронизирована. Я знаю, что могу использовать проценты, но я надеялся, что было решение для flexbox. Спасибо

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

Я не уверен, что понимаю проблему высоты. Столбцы и изображения одинаковой высоты. Чтобы выровнять отступ вокруг изображений, используйте col-auto вместо col. Это приводит к сокращению столбцов в соответствии с шириной их содержимого.

  <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;
}