【勉強メモ】widthの分割 & 高さを固定した画像の伸縮

widthの分割

「calc(100%/3);」で、widthの値が3等分になるよう計算する。
※「calc」は、割り切れない数で均等に配置したい場合などに便利。

https://code-step.com/recipe-code/

割り切れる時は％でもいいかも！　width: 50%; 
同じ大きさで画像を３つ横並べしたい時に便利！
下の画像の伸縮と合わせて使える。

高さを固定した画像の伸縮

「object-fit: cover;」で、高さを固定したまま
画面幅に合わせて画像を伸縮させることができる。
（※IEでは正しく動作しないため注意が必要）
「vertical-align: bottom;」で画像の下にできる隙間を消す。

{ width: 100%;
height: 500px;
object-fit: cover;
vertical-align: bottom; }

https://code-step.com/recipe-code/

これを使うと、指定の高さのサイズに合わせて中の画像が伸び縮みする。
フォトショのマスク状態の写真みたいな。

width とheightを逆にする（height：100％、width：指定）とwidthが指定サイズで固定されて、画像が伸び縮みする。

object-fit: coverで中の画像の比率は保持されるので、縦長・横長画像にならない。これにより、伸縮というより拡大縮小になる。

全画面表示で伸縮

「width: 100%;」と「height: 100vh;」で全画面表示にする。
「object-fit: cover;」でトリミングを行い、「object-position: center top;」で横は中央、縦をトップに配置する。

width: 100%;
height: 100vh;
object-fit: cover;
object-position: center top;

https://code-step.com/recipe-code/

メインビジュアルなど全画面の時に、レスポンシブなど画面幅に応じて画像が伸縮させる。幅固定の伸縮と同じように、画像が映し出されるサイズは固定されているが、動きに合わせて中の画像が伸縮する。

vhという単位についてはこちらを見よう
→https://jajaaan.co.jp/web-production/frontend/css-vw-vh-vmin-vmax/

困った時

・レスポンシブで画像をフルカバー（余白無し）にしたいのに、右側に謎の余白が残ってしまう！！

→本家でwidth指定していたら、それが原因なので100％にする。
※存在を忘れて悩みがちなので注意！！

あとmax-widthとwidthを意味なく混同すると後でレスポンシブする時、謎の余白が残りやすいのでちゃんと考えて使う。

widthとmax-widthの違いについては↓
https://shu-sait.com/max-width-width-chigai/ 

・背景でbackground-imageを使う時！！！！

background-image: url();
width: 100%;
height: 100vh;
background-size: cover;
background-position: center;

→background-size: cover;でobject-fit: cover;と同じ効果がある。
※object-fit: cover;はHTMLのimgに対して使う。

→background-position: center;はobject-position: center top;と同じ効果。これをしないと、センターを基準に拡大縮小しないから、画面幅が小さくなると左側しか見えなくなる。
https://jajaaan.co.jp/css/css-full-screen/