CSSで異なる画像サイズを同じ高さ、同じサイズでレスポンシブに表示させてみた(メディアクエリなし)

下記の条件で困ってる方向けに、備忘録残します。

・画像サイズが違うけど、全て同じ大きさで画像を一覧表示したい
・画像に空欄ができてしまう
・なるべくメディアクエリは使いたくないがレスポンシブにしたい

画像は、テスト用にオンラインからお借りいたしました（便利ですねコレ）
https://placehold.jp/

ポイント

・要素はそれぞれwidth:100%; height:100%; で指定
・imgタグにaspect-radioを指定（今回は4/3としました)

HTMLコード

<div class="image-area">
  <!-- extensible !-->
  <ul>
    <li>
      <img src="https://placehold.jp/550x550.png" alt="">
    </li>
    <li>
      <img src="https://placehold.jp/1250x850.png" alt="">
    </li>
    <li>
      <img src="https://placehold.jp/2050x1450.png" alt="">
    </li>
  </ul>
</div>

CSSコード

body {
  margin:0;
  padding:0;
}
ul, li {
 margin:0;
  padding:0;
}
div {
  width:100%;
  height:100%;
}
ul {
  display:flex;
}
li {
  width:100%;
  max-height:100%;
  list-style:none;
}
img {
  width:100%;
  height:100%;
  aspect-radio:4/3;
  border:solid; /* borders are listed for clarity*/
}

CSSは簡易的なリセットCSS書いてます。

手っ取り早くどんな出来栄えか知りたい方

※基本的に、画像サイズに関係なく、無理矢理サイズを統一するため、画像サイズや特定のサイトによっては、
かなり変に見えてしまう可能性もありますので、ご了承くださいませ。

また、ここはこうしたほうがいいよー！等ございましたら、ご指摘いただけますと幸いです！
努力し、精進いたします（好奇心旺盛、勉強大好きです）