【webデザイン】模写コーディング③苦手なプロパティたち｜object-fit編
Code jump模写コーディング入門編が終わり
躓いたプロパティをおさらいしていきます！
object-fitとは
CSS のプロパティで、
画像や動画のコンテンツを
要素のコンテナにどのようにフィットさせるか
を指定するために使用される。
画像や動画が、指定された幅や高さに収まるように調整される際の挙動を制御します。
「object-fit」を使用すれば、、、
↓
画像の縦横比を気にしなくて良い！！！◎
▪︎ fill
img {
object-fit: fill;
}fill：デフォルト値。
コンテンツがコンテナの縦横比を無視して、
コンテナ全体を埋めるようにサイズ変更される。
コンテンツが歪むことがあります。
▪︎ contain
img {
object-fit: contain;
}contain：コンテンツ全体がコンテナ内に収まるようにサイズが変更される。
コンテンツの縦横比は保持され、
コンテナに余白が生じることがある。
▪︎ cover
img {
object-fit: cover;
}cover： コンテンツがコンテナ全体をカバーするようにサイズが変更される。
コンテンツの縦横比は保持されるが、
コンテナを完全に埋めるために
一部が切り取られることがある。
▪︎ none
img {
object-fit: none;
}none ：コンテンツのサイズは変更されず、
コンテナのサイズに影響されません。
画像の一部がコンテナの外に表示されることがある。
画像はピクセル等倍で表示される。
エリアに対してはみ出してしまう場合は
トリミングされ、足りない場合は余白が入る。
▪︎ scale-down
img {
object-fit: scale-down;
}scale-down：none と contain の中間的な動作。
コンテンツがコンテナ内に収まるように、
必要に応じて縮小されますが、元のサイズよりも大きくなることはない。
トリミング位置の調整
cover や none を使ってトリミングする場合、
デフォルトでは上下・左右均等にトリミングされる。
その場合、注目させたい箇所が切り取られてしまう可能性があるので
object-position を併用することで
トリミングの比率を設定できる！！
img {
object-fit: cover;
object-position: 25% 75%;
}→ 画像の左端から25%の位置、
画像の上から75%の位置が交わる箇所は
注目点として設定される為、
切り取られない。
参考サイト
今回参考にしたサイトです！
デモ操作することもできて分かりやすい〜！！
次回の予定
次はCode jump模写コーディング初級編を
進めていけたらなと思います！
次こそソースコード見ないで頑張る！
お疲れ様でした🌝
この記事が気に入ったらサポートをしてみませんか？