CSS3 badgeCSS3から新たに使えるようになった「object-fit」プロパティについて解説します。

聞き馴れない名前のプロパティかと思いますが、主に画像のアスペクト比に作用して、表示領域に対しての画像の大きさを変更する場合に使います。
……文章の説明だけでは理解しにくいと思うので、実際に「object-fit」を使ったサンプルをご覧ください。

object-fit：サンプル・デモ

※サンプルは、Safari、Google Chrome、Firefox等のモダンブラウザでご確認ください。

親要素のボックスの表示領域に依存して、画像の大きさが変更されているのをご確認できると思います。

このプロパティ［object-fit］で指定できる値は５つ。

  • object-fit: fill;
  • object-fit: contain;
  • object-fit: cover;
  • object-fit: none;
  • object-fit: scale-down;

それぞれ下記のように作用します。

fill
オブジェクトはアスペクト比を変えながら、全体がコンテンツボックス内を満たすようにリサイズされます。（初期値）
contain
オブジェクトはアスペクト比を保ちながら、全体がコンテンツボックスに収まるようにリサイズされます。オブジェクトの幅と高さのうち、長いものがコンテンツボックスにフィットします。
cover
オブジェクトはアスペクト比を保ちながら、コンテンツボックスを完全に覆うようリサイズされます。オブジェクトの幅と高さのうち、短いものがコンテンツボックスにフィットし、長いものははみ出します。
none
オブジェクトはリサイズしません。
scale-down
「none」か「contain」の小さい方を適用します。

なお、［object-fit］プロパティは「置換要素」に対して指定します。

HTMLのインライン要素は、それぞれ「非置換要素」と「置換要素」に分類されます。

非置換要素では開始タグと終了タグに囲まれたテキストが表示されます。

置換要素は、空要素のように開始タグと終了タグで囲まれたテキストが表示されるのではなく、要素特有のコンテンツに置換されて表示されます。

HTML5ではインライン要素の概念が無くなっており、置換要素には以下に挙げる要素が含まれます。

  • area
  • audio
  • canvas
  • embed
  • hr
  • iframe
  • img
  • input
  • menu
  • object
  • video

具体的には次のようなコードで実装することになります。

.box-1 img {
object-fit: fill;
}

.box-2 img {
object-fit: contain;
}

.box-3 img {
object-fit: cover;
}

.box-4 img {
object-fit: none;
}

.box-5 img {
object-fit: scale-down;
}

特に、ギャラリーサイトのサムネイルや、ECサイトの商品一覧の画像など、意外と使いどころの多い便利なプロパティです。
この機会に覚えてみてはいかがでしょうか。

object-fit：サンプル・デモ