備忘録21:CSS-画像サイズを調整する2
転職のための3月6日から某スクールにでプログラミング学習を始めた32歳のおっさんです。オリジナルアプリの開発が終わって一息。
C#とPHPの学習もしたい。
1:開幕の自問自答
①で、もう1つってどうやるんすか?
⇨なんですかいきなり
②前回もう1つ方法があるって言ってましたやん
⇨そういえばそうでした
③で、どうやるんすか?
⇨CSSから指定します
④そんなことができるんすか?????
⇨出来ます。個人的に超便利だと思ってます。
⑤はよ教えてっ!
⇨はい
と、言うわけで今回はCSSから画像サイズを指定する方法です。
個人的にはこちらの方が実用性が高いかなぁと考えてます。
JavaScriptとも併せやすいので使い易いです。
2:環境
OS:Mac BigSur
Rails:6.0.0
3:全体の流れ
①現状の確認
②CSSからサイズを調整する
③CSSによる比率の調整
④様々な調整方法
⑤終わりに
4:現状の確認
現状はこちら。
前回の冒頭と同じ状態です。
今回はこれをCSSから調整していきます。
5:CSSからサイズを調整する
ひとまず、サイズだけを指定するとこのようになる。
これだと、前回と同じくイワシくんが潰れてしまう。
だがCSSの尋常では無い利便性の高さはここから始まる。
6:CSSによる比率の調整
このように記述することで、アスペクト比を維持することができる。
CSSによるobject-fitプロパティの属性値は他にもある。
7:様々な調整方法
このように複数の属性値がある。
個人的には scale-down と object-position を非常に愛用したいところ。
色々と融通が効くので扱い易い。
8:終わりに
画像のサイズ調整に関してはこれで終了です。
使い所にも寄ると思うのでケースバイケースだとは思いますが
個人的には前回の方法よりも、CSS指定の方が良いかなーと思います。
色々と細かい調整が効くので便利ですね。ホント。
次回はそんなCSSに関する内容です。
CSSをView毎で個別に適用させます。
終わり!!!!!!!!!!!!!!!!!
この記事が気に入ったらサポートをしてみませんか?