Bootstrap で 画像 が 隣り合う時に 高さを調節する

テキスト と 画像 が 隣り合う時に
テキストが 低い場合 指定の画角で表示し
テキストが 高い場合 画像の高さだけ 伸びていく
そんな事できないかなと 思って作ってみました

使い方は d-flex flex-row を 指定した中で card-contents と card-img を 並べてやるだけです

<div class="card">
  <div class="card-body d-flex flex-row">
    <div class="card-contents">
      <h2 class="card-title">Card title</h2>
      <p class="card-text">card's content.</p>
    </div>
    <figure class="card-img ratio-16-9">
      <img class="img-cover w-100" src="..." alt="Card image cap">
    </figure>
  </div>
</div>

<style>
  .img-cover { object-fit: cover; }
</style>

画像が 枠内で 全体表示されるように CSS で 別途指定しています

使う機会なんて なかなかないと思うけど
何度も 調べる作業も 面倒なので ソースコードをまるっと 備忘録!!