[Html/Rails]画像の大きさを調整をしたい

初めに

この記事の対象者

・画像を貼ったのはいいけど、大きすぎて/小さすぎてなんか見にくい。。。ヒト用

環境

・Macbook Air (Retina, 13-inch,2019)
・プロセッサ 1.6GHz デュアルコアIntel Core i5
・メモリ　8GB 2133 Mhz LPDDR3
・MacOS Big Sur　バージョン 11.5.2

記事の目次

１）cssを使って画像の大きさを変える方法
２）rubyを使って画像の大きさを変える方法
３）画面の大きさに応じて画像の大きさを変える方法
４）最後に

cssを使って画像の大きさを変える方法**

１）html内に画像を添付

<img src ="画像の名前.png" src="画像のファイルの場所" class="sample">

２）cssで画像のクラス名を指定して横幅、縦幅を設定

.sample{
  width:50px;
  height: 50px;
}

rubyを使って画像の大きさを変える方法**

１）html内<%= image_tag>を使って画像を添付

<%= image_tag "ファイル名.png" %>

２）<%= image_tag>内にsize: "縦幅x横幅"を追加

<%= image_tag　"ファイル名.png", size: "50px＊50px" %>

画面の大きさに応じて画像の大きさを変える方法**

大きさの単位に気をつけて！

※幅の単位をpxにすると、その大きさに固定されるためユーザが画面の大きさを変えても画像の大きさはそのままとなる
※幅の単位を%にすると、html内は入れ子構造（親子関係）になっているため、親の幅より大きくなることはない＝画面に応じて大きさが変わる

最後に

もし自分のアプリに画像を使っているなら、見た目が悪いとユーザは使いたいと思わなくなると思うからレイアウトは大事だとおもう！

ここまで読んでくださってありがとうございます！