最近便利なCSSおれおれAdvent Calendar 2023 – 07 日目

タイルにサムネイル画像を表示するみたいなときって、領域に収まるよう画像の大きさを調整するのが普通ですよね。昔は background-image と background-size を使ってやっていましたが、画像を HTML 文書ではなく CSS の装飾としてマークアップする必要がありました。

object-fit を用いると <img> 要素に対して同じように大きさを調整することができます。

使い方

.thumbnail {
  height: 100px;
  object-fit: cover;
  width: 100px;
}

値

  • fill – 要素の大きさに合わせる。画像本来の縦横比は無視。これが今まで通りの初期値
  • cover – 要素の領域を覆う大きさ。余白はできない
  • contain – 画像全体が見える大きさ。縦か横かに余白ができる
  • scale-down – 画像が要素より大きいときは contain 、小さいときは none と同じ
  • none – そのままの大きさ。小さければ余白ができるし大きければカットされる

余白は background 系が利くので市松模様でも置いておくと良いんじゃないかな。

位置調整

background-position みたいに object-position でやれます。

指定しなくても初期値が中央になるのでだいたいそれでいいんじゃないかな。

画像以外

<video> でも使えるらしい。たぶん使ったことないな。

おしまい

サムネイル画像の表示で愛用してます。

2018 年から使えてるみたい。

まあ background-image でも良いは良いんだけど、やっぱ画像には <img> 使いたいじゃないですよね。そういう気持ちです。

参考