この世の全てを自動化してぐうたら生活したすぎる

煩悩八百万クリエイター戦記

HTML/CSS

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

更新日:

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

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

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

 

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

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

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

cat

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

 

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

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

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

cat

<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の記述も不要です)

f-arts336

f-arts336

-HTML/CSS

Copyright© 煩悩八百万クリエイター戦記 , 2018 All Rights Reserved.