3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

#やりたいこと
・画像を円形に表示したい
・画像を表示するスペースに合わせて画像を縮小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拡大する、縦横比は変えない、多少カットされても良いからなるべく大きく表示する、の3つを満たしたかったので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

3
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?