CSSで画像の縦横比(アスペクト比)やサイズを自動調整する(object-fitの使い方)

<style>
.icon-fill {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #333;
  /* 
    fill: 親要素に合わせて、コンテンツのアスペクト比を無視してリサイズされます。
    つまり、コンテンツが親要素にピッタリとフィットするように拡大または縮小されます。
    なので、縦横比(アスペクト比)が崩れるデメリットがあります！
  */
  object-fit: fill;
}
.icon-cover {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #333;
  /* 
    cover: 親要素に合わせて、コンテンツが完全に表示されるように調整されます。
    つまり、コンテンツが親要素にピッタリと合わせられ、余白が空くことはありません。
    必要に応じて、ボックスからはみ出した部分はトリミングされます。

    縦横比を守る！はみ出る部分は、トリミング！
  */
  object-fit: cover;
}
.icon-contain {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #333;
  /* 
    contain: 縦横比を保持し、ボックスに収まるようにリサイズされます。
    幅と高さのうち大きい方のサイズに合わせて比率を保持してボックスにフィットさせます。
  */
  object-fit: contain;
}
.icon-scale-down {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: #333;
  /* 
    scale-down: contain と cover のうち、小さい方のサイズに合わせて表示します。
  */
  object-fit: scale-down;
}
.container {
  display: flex;
}
.card {
  margin: 0 25px;
  text-align: center;
}
</style>

<div class="container">
  <div class="card">
    <p class="" >object-fit: fill;</p>
    <img src="https://masanyon.com/wp-content/uploads/2022/08/6d4f415fd1a8072759496b22c610ae7d-scaled.jpg" 
      alt="ロボ玉" class="icon-fill" style="border-radius: 50%;">
  </div>
  
  <div class="card">
    <p>object-fit: cover;</p>
    <img src="https://masanyon.com/wp-content/uploads/2022/08/6d4f415fd1a8072759496b22c610ae7d-scaled.jpg"
      alt="ロボ玉" class="icon-cover" style="border-radius: 50%;">
  </div>
  
  <div class="card">
    <p>object-fit: contain;</p>
    <img src="https://masanyon.com/wp-content/uploads/2022/08/6d4f415fd1a8072759496b22c610ae7d-scaled.jpg" 
      alt="ロボ玉" class="icon-contain" style="border-radius: 50%;">
  </div>
  
  <div class="card">
    <p>object-fit: scale-down;</p>
    <img src="https://masanyon.com/wp-content/uploads/2022/08/6d4f415fd1a8072759496b22c610ae7d-scaled.jpg" 
      alt="ロボ玉" class="icon-scale-down" style="border-radius: 50%;">
  </div>
</div>