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

我不确定我是否了解身高问题。列和图像的高度相同。要均衡图像周围的填充，请使用L而不是gradlew checkstyle。这会使列缩小以适合其内容的宽度。

col-auto

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