flex boxで画像の高さを、隣のコンテンツに合わせたい

Question

親要素を画面幅いっぱいに、
子要素を左にコンテンツ、右に画像(各width:50&)を横に並べるレイアウトを設定したいのですが、縮小するとどうしても画像の高さが足りなくなってしまいます。
画像を背景設定すればいいと思ったものの、背景にしてしまうと、高さを設定が昼用で、結局可変すると高さが揃わなくなります。

<div class="flex-wrapper">
　　<div class="content-wrapper">
   　　<h1>TITLE</h1>
      <p>txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt txt </p>
   </div>
   <div class="img-wrapper">
     <img src="https://placehold.jp/3d4070/ffffff/500x700.png" alt="">
   </div>
</div>

img {
    width: 100%;
}
.flex-wrapper {
    display: flex;
    flex-wrap: wrap;
}
.content-wrapper {
    width: 50%;
    background: #aaa;
    padding: 10%;
    box-sizing: border-box;
}
.img-wrapper {
    width: 50%;
}

色々調べたのですが解決できず、
いい方法があれば教えていただきたいです。

よろしくお願いします。

Answer 1

下記でどうですか。

img {
    width: 100%;
    height: 100%;      /* 追加 */
    object-fit: cover; /* 追加 */
}
.flex-wrapper {
    display: flex;
/*    flex-wrap: wrap; 削除 */
}

object-fitはIE非対応なので、IEにも対応させたい場合は、background-img で背景画像として表示させてください。

.img-wrapper {
    background: center / cover url(https://placehold.jp/3d4070/ffffff/500x700.png);
}

Comments

[shibaco]

なるほど、object-fitですね！
無事解決できました！
ご指摘いただいた通りに修正したところ、背景画像も高さが揃って本当に助かりました。
ありがとうございました。