object-fitを使ってみる

imgやvideoなどの要素を、コンテナにどう配置するかを指定できるCSSプロパティ「object-fit」を試してみます。

対応ブラウザ

対応ブラウザはこちら
IEで非対応ですが、その他の主要なブラウザではサポートされているようです。

サンプルコード

まずはimgやvideoのラッパー要素を用意する形で試してみます。

<h2>object-fit: contain;</h2>
<div class="box contain">
  <img src="img.jpg">
</div>
<div class="box contain">
  <video src="video.mp4"></video>
</div>

<h2>object-fit: cover;</h2>
<div class="box cover">
  <img src="img.jpg">
</div>
<div class="box cover">
  <video src="video.mp4"></video>
</div>

<h2>object-fit: fill;</h2>
<div class="box fill">
  <img src="img.jpg">
</div>
<div class="box fill">
  <video src="video.mp4"></video>
</div>

ラッパー要素に幅と高さを指定して、imgとvideoに対してobject-fitを設定します。

.box {
	width: 200px;
	height: 200px;
	border: red 1px solid;
}
.contain img,
.contain video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.cover img,
.cover video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.fill img,
.fill video {
	width: 100%;
	height: 100%;
	object-fit: fill;
}

注意点として、imgやvideoに対してwidth: 100%;とheight: 100%;を指定して、ラッパー要素と同じサイズにしておく必要があります。
object-fitのデモページ
containの場合はアスペクト比を維持したまま領域内に収まる最大サイズ、coverの場合はアスペクト比を維持したまま領域全体を覆う最小サイズ、fillの場合はアスペクト比を維持しないで領域全体を覆う最小サイズになります。

次にラッパー要素がない場合を試してみます。

<h2>object-fit: contain;</h2>
<img src="img.jpg" class="img-contain">

<h2>object-fit: cover;</h2>
<img src="img.jpg" class="img-cover">

<h2>object-fit: fill;</h2>
<img src="img.jpg" class="img-fill">

<h2>object-fit: scale-down;</h2>
<h3>640px × 360px</h3>
<img src="img.jpg" class="img-scale-down">
<h3>192px × 108px</h3>
<img src="img-s.jpg" class="img-scale-down">

先ほどはラッパー要素に幅や高さを指定していたのを、imgやvideoに対して設定すればOKです。

.img-contain {
	width: 300px;
	height: 300px;
	object-fit: contain;
}
.img-cover {
	width: 300px;
	height: 300px;
	object-fit: cover;
}
.img-fill {
	width: 300px;
	height: 300px;
	object-fit: fill;
}
.img-scale-down {
	width: 300px;
	height: 300px;
	object-fit: scale-down;
}

先ほどの例で入れていなかったscale-downですが、元々のサイズとcontainを指定した場合を比べて、サイズの小さい方で表示されます。
object-fitのデモページ2

上記デモで画像を選択するとわかりますが、containの場合はimgに指定したサイズよりも小さく表示されるので、今回の場合だと上下にスペースが発生します。
デフォルトでは領域の上下左右中央位置に配置されますが、object-positionプロパティで位置の指定ができます。

<h2>object-fit: contain; object-position: left top;</h2>
<img src="img.jpg" class="sample1">

<h2>object-fit: contain; object-position: 0% 100%;</h2>
<img src="img.jpg" class="sample2">

<h2>object-fit: cover; object-position: left top;</h2>
<img src="img.jpg" class="sample3">

.sample1 {
	width: 300px;
	height: 300px;
	object-fit: contain;
	object-position: left top;
}
.sample2 {
	width: 300px;
	height: 300px;
	object-fit: contain;
	object-position: 0% 100%;
}
.sample3 {
	width: 300px;
	height: 300px;
	object-fit: cover;
	object-position: left top;
}

位置の指定はleftやtopなどのキーワードか100%や10pxなどの値で行います。
object-fitのデモページ3