今日の仕事は最初が眠くて仕方がなかったのでブログを書いてLPを作って集中力が完全に切れたのでポートフォリオを作成しました、↓です。
画像の大きさを画面幅に合わせて変えたくて上手くいかなくてイライラしてすっかり存在を忘れていたobject-fit:coverです 笑
object-fit:coverは画像サイズの調節にめっちゃ便利
例えば↓の画像の大きさを変えようとしたとします。
縦横の幅を指定すると縦横比が崩れて↓みたいに画像が変になります。
変な画像になります
こういう時はCSSに１行追加すれば解決できます。
するとこうなります。
画像がいい感じになります
この場合は縦の長さが足りなかったのでもっと長くすればいいです。
どんな時にobject-fit:cover;を使うか
LPを作るときにファーストビューを置きますが私はいつもまずwidthだけで画面に収まらないかを考えます。
大体うまくいくのですがうまくいかない時もあります。
そんな時にobject-fit:coverを使います。
widthを指定してheight:autoにすれば縦横比が崩れないですがファーストビューの場合縦と横の長さを画面にうまく収めないといけないから私は使いません。
ファーストビューじゃない時は全然使います。
object-fitプロパティは他にもありますがとりあえずこれを抑えておけばLPを作るのは大丈夫です。
今回説明してないobject-fitプロパティに関しては↓に詳しく説明があります。
http://www.htmq.com/css3/object-fit.shtml
使う際の注意点
縦の長さをあまりに短くすると↓みたいになるのである程度の長さが必要になりますので調節しましょう。
私が作ったLPでは高さの調節をして↓にしました。
LPのファーストビューは商品の印象を決めるので相当大事だと思います。
