WEB部門での実務経験

実務経験21日目、コーディングで画像サイズをいい感じにしたい時

実務経験21日目

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

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

↓です。

https://www.resume.id/uhei

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

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

実務経験21日目

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

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

 

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

するとこうなります。

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

 

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

widthを40vwとかにして「なんか微妙だな〜」と思った時にいかがでしょうか?

私は画像サイズの調節が苦手すぎるのですがこれで少しはマシになった気がします。