画像を円形に表示 #object-fit #CSS #Ruby on Rails #Progate

やりたいこと

・画像を円形に表示したい
・画像を表示するスペースに合わせて画像を縮小or拡大したい
・表示する画像の縦横比は変えないで実現したい

経緯

・ProgateでRuby,Ruby on Rails,HTTM&CSSを学習し、現在tweet_appを再現中！
その中でつまずいた箇所の備忘として。

解決方法

①画像を加工　→面倒臭そう・・・なので今回は無視しました
②cssで指定　→今回はこれでやります

まずHTMLで画像を表示します。

HTML

img(src="sample.jpg")

次にCSSで設定していきます。

CSS

img {
  border-radius: 50%;  /* 角丸半径を50%にする(=円形にする) */
  width: 100px;  /* 縦横を同じ値にする */
  height: 100px;  /* 縦横を同じ値にする */
  object-fit: cover; /* 縦横比固定したまま上2つの縦横の範囲内に収まるように配置する */
}

これだけ！簡単！
ただ、
border-radiusを50%にすると円になるのはなんで？
object-fitってなに？ないとどうなるの？
という疑問が湧いてきたので少し調べてみました。

解説

※初心者が調べて解釈した結果になります。訂正・追加があればぜひコメントください！

border-radius: 50%;

・50%の場合、四角い画像が正方形になる
・pxで指定する場合は、widthとheightで指定したpx値の半分にする(100pxの場合は50px)。
・0%（0px)に近づけるほど、円ではなく四角に近づく
・考え方：四隅にくっつく円を4つ作り、直角の代わりに円の一部分（四角と円の接点から接点までの弧）を表示する。円の半径が小さいほど四角に近づき、大きいほど（ただしMAX50%)円に近づく
・Progateでは、border-radiusを使ってボタンの角を少しだけ丸にしていた

width: ◯◯px; 
height: ◯◯px;

・画像の大きさを決める（値が大きいほど大きな円になる）
・幅と高さは同じ値にする（円なので）

object-fit: cover;

・object-fitでは、widthとheightで定めたスペースへの”はめ込み方”を決めることができる
・今回は　はめ込むスペースに合わせて画像を縮小or拡大する、縦横比は変えない、多少カットされても良いからなるべく大きく表示する、の３つを満たしたかったのでcoverとしました。こちらがとてもわかりやすかったです。
・border-radius,width,heightだけでも画像を円にできるが、指定したwidthとheightのpxと画像のpxに差がある場合はおすすめできない（画像の一部しか表示されないor画像がかなり小さくなってしまう）

◆参考サイト
https://www.nishishi.com/css/trim-image-to-circle.html
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit