Два изображения разных размеров, чтобы иметь одинаковую высоту и заполнить ширину родительского

Question

У меня есть родитель с шириной 'col-9'. У меня есть два изображения, которые могут иметь разную высоту и ширину. Как я могу получить изображения, чтобы заполнить ширину родителя и иметь равную высоту? Высота изображений должна определять высоту родительского элемента.

Я использовал Flex и выяснил соотношение сторон (его ширина делится на высоту), но надеялся на более простой способ, поскольку изображения постоянно меняются.

Я использую Bootstrap 4.

РЕДАКТИРОВАТЬ

Это то, что у меня есть, работает, но я не хочу каждый раз определять соотношение сторон для 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

Я предпочитаю использовать 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>

Answer 2

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