画像をいい感じの正円にする方法

画像をいい感じの円にしたい時（サムネやアイコン等）ってありますよね。簡単に設定するやり方をお教えします。

円にするためにはまず正方形にする

まずはこんな感じの画像があります。

普通に正方形にしようとすると、

<img src="cat.jpg" alt="cat" style="width:200px; height:200px;" />

こんな感じで潰れてしまいますので、object-fitというCSSオプションを使います。
↓↓↓

<img src="cat.jpg" alt="cat" style="width: 200px; height: 200px; object-fit: cover;" />

ポイントはwidth・heightもキチンと指定してあげるところです。

今回はタグ内部のstyleに記述していますが、こちらはCSSに記載してもOKです。

正方形の角を丸くして円にする

<img src="cat.jpg" alt="cat" style="width: 200px; height: 200px; object-fit: cover; border-radius: 50%;" />

「border-radius: 50%」というCSSオプションを付与してあげると、丸くなります。

私のプロフィール画像

<div style="max-width:200px; margin: 0 auto;">
	<img src="プロフィール画像.jpg" alt="プロフィール画像" width="100%" style="object-fit: cover; border-radius: 50%;">
</div>

画像をレスポンシブにしたいのと、中央寄せしたかったので、divでくくって書きました。また、もともと正方形の画像を使っていればheightの指定も不要です。（object-fit: coverの記述も不要です）