概要

要素の表示方法を指定する。 <img> に使用するのが一般的。

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

要素には width と height を設定し、その範囲内でどのように表示するかを object-fit に設定する。

object-fit に指定できる値

値	説明
`fill`	指定した範囲に合わせて、縦横比を維持せずリサイズ
`contain`	縦横比を維持したまま、指定した範囲に上下左右が収まる最大のサイズにリサイズ
`cover`	縦横比を維持したまま、指定した範囲を上下左右がはみ出る最小のサイズにリサイズ
`none`	リサイズせずにそのまま表示する（`width`、`height` は無効となる）
`scale-down`	指定した範囲より小さい場合は `contain` として、大きい場合は `none` として振る舞う

hysryt commented 6 years ago

object-fit の指定を font-family に記述する。

img {
width: 100px;
height: 100px;
object-fit: cover; 
font-family: "object-fit: cover;";  /* IE11用 */
}