响应式 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;
}