LP作成に必要なスキル

実務経験21日目、object-fitプロパティでサイズの調節

実務経験21日目

今日の仕事は最初が眠くて仕方がなかったのでブログを書いてLPを作って集中力が完全に切れたのでポートフォリオを作成しました、↓です。

https://www.resume.id/uhei

画像の大きさを画面幅に合わせて変えたくて上手くいかなくてイライラしてすっかり存在を忘れていたobject-fit:coverです 笑

 

object-fit:coverは画像サイズの調節にめっちゃ便利

例えば↓の画像の大きさを変えようとしたとします。

実務経験21日目

縦横の幅を指定すると縦横比が崩れて↓みたいに画像が変になります。

実務経験21日目変な画像になります

 

こういう時はCSSに1行追加すれば解決できます。

するとこうなります。

実務経験21日目画像がいい感じになります

 

この場合は縦の長さが足りなかったのでもっと長くすればいいです。

 

どんな時に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のファーストビューは商品の印象を決めるので相当大事だと思います