【Rails】画像アイコンを作ってみよう！【画像表示、加工】

はじめに

どうも、春からエンジニア転職予定のkazuhiroです。
文系職からの転職であり、プログラミングは未経験ですが、
初学者目線で疑問に思った点などを、アウトプットしていきたいと思います。
※間違いや改善点などありましたらコメントいただければ幸いです。

本題

転職先のBossより、このような練習問題が出された。

やってやんよ、と。
ユーザー一覧画面については、以前掲示板一覧画面を作成していたため、
同様の手順で作成することができたが、画像の表示方法で引っかかってしまう。

・画像追加

早速ググってみたところ、image_tagメソッドを使うのが良さそうだ。

    <%= image_tag '画像ファイルパス', 'オプション' %>

今回の課題ではusersテーブルのimage_urlカラムに画像urlが格納されているため、
下記のようにコーディング。

    <%= image_tag user.image_url %>

結果を見てみよう。

クソでかデンジくん降臨。
オプションで画像のリサイズができるようなので修正して、
他ユーザーも追加してみた。

    <%= image_tag user.image_url, size: "75x75" %>

いい感じのサイズ感になリました。
ただ、画像が引き伸ばされてる感があるのでもう少し修正します。

・画像加工

ここで使用したのがcssのobject-fitプロパティ。
用途に応じていろいろできるみたいですが、今回はcontain
（アスペクト比を維持したまま、指定サイズに収まるよう拡大縮小してトリミング）を適用。
※こちらのサイトの解説がわかりやすかったです。
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

  .resize_image {
    width: 75px;
    height: 75px;
    object-fit: cover;　
    border-radius: 50%; #画像を円形に
    padding: 2px;
    border: 2px solid #333300;
 　　　}

いい感じになりました。

今回はborder-radius（画像の角を丸める）で画像を円形にしましたが、
画像を丸くしたいだけであればrounded-circleでもOKのようです。

  <%= image_tag user.image_url, class: "rounded-circle", size: "75x75" %>

おわりに

噛み砕きすぎて、くどい表現になってしまった感もありますが、
Railsにおける画像表示、加工方法について記載しました。
初歩中の初歩の内容かもしれませんが、何かの参考になれば幸いですm(_ _)m