【Labs】CSS3のobject-fitで画像を簡単タイル表示

こんにちは（・∀・）

今日はCSS3のobject-fitで画像を簡単にタイル表示にする方法をご紹介します。

画像をインスタみたいなタイル表示にする

普通に画像を表示した場合はこんな感じ。

Result
スマホでのご確認はこちらをどうぞ

.box {
  width: 300px;
  height: auto;
}
.box img {
  width: 100%;
  height: auto;
}

大きさの違う画像を横300px、縦autoに縮小して表示。

元の画像の大きさが違うのでデコボコです。

次に画像の縦横を300pxにして表示した場合はこんな感じ。

Result
スマホでのご確認はこちらをどうぞ

.box {
  width: 300px;
  height: auto;
}
.box img {
  width: 300px;
  height: 300px;
}

縦横300pxに縮小表示。

大きさの違う画像なのでアスペクト比はおかしくなります。

CSS3のobject-fitで画像を簡単タイル表示

object-fitを使って画像をの縦横を300pxにして表示した場合はこんな感じ。

Result
スマホでのご確認はこちらをどうぞ

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

画像の中央部分を縦横300pxでくり抜いて表示。

サイズの違う画像でも元のアスペクト比を保ったまま表示してくれます。

object-position

画像をトリミングする位置を中央以外にする方法もあります。

img{
  object-position: 100% 0%;
}

object-positionプロパティで画像をトリミングして表示する位置を指定することができます。

i1.img{
  object-position: 100% 0%;
}
i2.img{
  object-position: 0% 100%;
}

上の指定が右上、下の指定が左下になります。

object-fitの値

ちなみに、object-fitの値はcoverだけではありません。

i1.img {
  object-fit: fill;
}
i2.img {
  object-fit: contain;
}
i3.img {
  object-fit: cover;
}
i4.img {
  object-fit: none;
}
i5.img {
  object-fit: scale-down;
}
img {
  width: 100%;
  height: 100%;
}

サンプルでそれぞれの値の違いをご確認ください。

Result
スマホでのご確認はこちらをどうぞ

プロパティobject-fit1行で画像を加工することなく簡単に大きさを変えることができて、とても便利なプロパティです。

ただ残念な事にIEと古いEdgeでは対応しておりません。

ですが、IEはともかく、新しいEdgeは対応しているので問題ないですね。

とは言っても古いブラウザでも対応させたいー、という場合、object-fit-imagesというJavaScriptプラグインがありますのでそちらで対応できるかと思います。

ファイルをダウンロードしたら同じリンク先の下の方に「Usage」という欄があるので、その通りに設定して、ダウンロードしたJavaScriptファイルを読み込めばできそうな感じです。