<ul>
  <li>
    <img src="https://unsplash.it/1600/900" alt="">
    <span>「 16 : 9 」のアスペクト比の画像が読み込まれています。</span>
  </li>
  <li>
    <img src="https://unsplash.it/1200/800" alt="">
    <span>「 3 : 2 」のアスペクト比の画像が読み込まれています。</span>
  </li>
  <li>
    <img src="https://unsplash.it/1200/1200" alt="">
    <span>「 1 : 1 」のアスペクト比の画像が読み込まれています。</span>
  </li>
</ul>

ul{
  display: flex;
  gap: 20px;
  padding: 20px;
}

li{
  flex: 1;
}

/* 画像のアスペクト比を指定 */
img{
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

span{
  display: block;
  line-height: 1.6;
  margin: 10px 0 0;
}