两个不同大小的图像具有相同的父级高度和填充宽度

Question

我有一个宽度为'col-9'的父母。我有两个可以具有不同高度和宽度的图像。 如何获得图像以填充父级的宽度并具有相等的高度？图片的高度应确定父级的高度。

我已经使用Flex并计算出纵横比（其宽度除以其高度），但是希望随着图像的不断变化而采用一种更简单的方法。

我正在使用Bootstrap4。

编辑

这是我可以使用的，但是我不想每次都为flex制定宽高比。

<div class="col-9">
    <div class="d-flex w-100">
        <img src="https://via.placeholder.com/400x600" alt="" class="" style="flex:.666667;">
        <img src="https://via.placeholder.com/300x600" alt="" class="" style="flex:.5;">
    </div>
</div>

Answer 1

<div class="col-md-9">
    <div class="image-wrapper" style="display: flex;">
        <img src="https://via.placeholder.com/400x600" alt="" style="margin-right: 10px;">
        <img src="https://via.placeholder.com/300x600" alt="">
    </div>
</div>

Answer 2

在这种情况下，我更喜欢使用flexbox。

您可以这样做：

.parent {
  display: flex;
  flex-flow: row;
}
.child {
  background: #ddd;
}
.child img {
  width: 100%;
  height: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-9">
  <div class="parent">
    <div class="child">
      <img src="https://cdn.pixabay.com/photo/2014/06/03/19/38/board-361516_1280.jpg"/>
    </div>
    <div class="child">
      <img src="https://cdn.pixabay.com/photo/2016/09/04/11/51/checklist-1643781_1280.png"/>
    </div>
  </div>
</div>