object-fit
height/widthは自身か親かどこかで明示する必要があるmrsekut.icon
その上で、その枠からはみ出さないようにtrimmingするのがobject-fit
default
box内を満たすように縦横比を変えながらresize
boxと画像の比率が合っていないと、めっちゃ縦や横に伸びたりして表示される
縦横比を保持して、boxに収まるようにresizeする
縦横の小さい方を基準にする
boxからはみ出した部分はtrimmingされる
縦横比を保持して、boxに収まるようにresizeする
縦横の大きい方を基準にする
故に、余白ができる
resizeせず、そのまま表示
これはtrimmingとは言わないのか？mrsekut.icon
trimmingとは
none と contain のうち、小さい方のsizeに合わせて表示
関連
参考
わかりやすい
各指定の際の表示例などもある
丁寧