object-fit
<img>や<video>に指定する
場所はobject-positionで指定すればいい
height/widthは自身か親かどこかで明示する必要があるmrsekut.icon
その上で、その枠からはみ出さないようにtrimmingするのがobject-fit
object-fit: fill
default
box内を満たすように縦横比を変えながらresize
boxと画像の比率が合っていないと、めっちゃ縦や横に伸びたりして表示される
object-fit: cover
縦横比を保持して、boxに収まるようにresizeする
縦横の小さい方を基準にする
boxからはみ出した部分はtrimmingされる
object-fit: contain
縦横比を保持して、boxに収まるようにresizeする
縦横の大きい方を基準にする
故に、余白ができる
object-fit: none
resizeせず、そのまま表示
これはtrimmingとは言わないのか?mrsekut.icon
trimmingとは
object-fit: scale-down
none と contain のうち、小さい方のsizeに合わせて表示
関連
background-size
参考
1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス
わかりやすい
各指定の際の表示例などもある
https://webdesignday.jp/inspiration/technique/css/7976/
丁寧
https://liginc.co.jp/463976
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit
https://code-kitchen.dev/css/object-fit/