備忘録21:CSS-画像サイズを調整する2

転職のための3月6日から某スクールにでプログラミング学習を始めた32歳のおっさんです。オリジナルアプリの開発が終わって一息。
C#とPHPの学習もしたい。

１：開幕の自問自答

①で、もう1つってどうやるんすか？
　⇨なんですかいきなり
②前回もう1つ方法があるって言ってましたやん
　⇨そういえばそうでした
③で、どうやるんすか？
　⇨CSSから指定します
④そんなことができるんすか？？？？？
　⇨出来ます。個人的に超便利だと思ってます。
⑤はよ教えてっ！
　⇨はい

と、言うわけで今回はCSSから画像サイズを指定する方法です。
個人的にはこちらの方が実用性が高いかなぁと考えてます。
JavaScriptとも併せやすいので使い易いです。

２：環境

OS：Mac BigSur
Rails：6.0.0

３：全体の流れ

①現状の確認
②CSSからサイズを調整する
③CSSによる比率の調整
④様々な調整方法
⑤終わりに

４：現状の確認

現状はこちら。
前回の冒頭と同じ状態です。
今回はこれをCSSから調整していきます。

５：CSSからサイズを調整する

ひとまず、サイズだけを指定するとこのようになる。
これだと、前回と同じくイワシくんが潰れてしまう。
だがCSSの尋常では無い利便性の高さはここから始まる。

６：CSSによる比率の調整

このように記述することで、アスペクト比を維持することができる。
CSSによるobject-fitプロパティの属性値は他にもある。

７：様々な調整方法

このように複数の属性値がある。
個人的には scale-down と object-position を非常に愛用したいところ。
色々と融通が効くので扱い易い。

８：終わりに

画像のサイズ調整に関してはこれで終了です。
使い所にも寄ると思うのでケースバイケースだとは思いますが
個人的には前回の方法よりも、CSS指定の方が良いかなーと思います。

色々と細かい調整が効くので便利ですね。ホント。
次回はそんなCSSに関する内容です。
CSSをView毎で個別に適用させます。

終わり！！！！！！！！！！！！！！！！！