現在ポートフォリオ作成中
ホームページ上に大きな写真を載せたいと考えました。
その際に自分が行ったことを記事にします
結論
CSSに
index.css
.photo{
object-fit: cover
を記述しました。
このobject-fitとはなんなのか説明していきます。
object-fitとは
widthやheightに合わせて写真の縦横比を調節してくれるものです!!
はみ出た部分はリサイズされます。
プロパティ一覧
様々なプロパティが準備してあります
fill
初期値。縦横比を無視して画像をコンテナーにフィットさせます。縦横比無視なので画像は歪む場合があります。
contain
縦横比を維持しつつ、コンテナーからはみ出さないようにぴったりフィットするようにします。余白の部分は縦横どちらの場合も中央に配置します。
cover
コンテナーに余白が出ないよう縦横比を維持しつつ、全体を覆うようにフィットさせ縦横中央に配置します。コンテナーからはみ出る部分はトリミングします。
none
画像のリサイズはせずに縦横中央に配置します。
scale-down
コンテナーより画像が大きい場合は「contain」を、小さい場合は「none」を指定します。
object-position
画像の位置を指定します。指定の仕方は「object-position:’横の位置’ ‘縦の位置’;」となります。位置の指定は「％」、「px」や「top」・「center」という指定もできます。初期値は「object-position:50% 50%」で縦横中央に配置します。
最後に
width: 〇〇vw;
height: 〇〇vh;
と合わせれば画面サイズが変わっても画像の大きさは変わらないからオススメです！
画像容量は1MB以下を推奨しますサイズは1920x1080