画像を丸く表示する方法

正方形の場合

300×300pxの画像

そのまま表示　<img src="images/fruits.jpg" alt="フルーツ">

角を30px 丸くする <img src="images/fruits.jpg" alt="フルーツ" style="border-radius: 30px;">

丸く表示　<img src="images/fruits.jpg" alt="フルーツ" style="border-radius:50%;">

長方形の場合

300×450pxの画像

そのまま表示　<img src="images/plant.jpg" alt="プラント">

丸く表示して円の中心を下げる
「maru」というCSSを作成する

【CSS】
.maru {
width:300px;
height:300px;
object-fit:cover;
border-radius:50%;
object-position:0px -140px;
}

<img src="images/plant.jpg" alt="プラント" class="maru">