【IE対応】CSSで画像をトリミングする「object-fit」まとめ

レイアウトのサイズに合わせ、出力する画像を複数用意する時代はもう終わりを告げた。

今は「object-fit」というウルトラ便利なcssで、１つの画像を自在にトリミングして表示できるのだ。

というわけで、「object-fit」の使い方をまとめてみました。

基本の使い方

まずは、画像をそのままトリミングしてみましょう。

以下は画像そのままのサイズのやつ。

これを300×300にトリミングします。

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

 

できました。
画像のwidthとheightを指定し、「object-fit: cover;」と加えることで、画像がトリミングされて表示されます！

親要素に合わせる

親要素が可変するので、画像もそれに合わせてトリミングしたい。背景みたいに使うパターンですね。

.trim02 {
  width: 100%;
  height: 200px;
}
.trim02 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

 

画像のwidthとheightを100%にしてあげればオッケー。
わざわざabsoluteとか使ってた人たち、泣いてませんか？

 

プロパティ

object-fit: cover; 以外にも、全部で５種類のプロパティがあります。

1. object-fit: fill;

指定したwidthとheight通りに画像を変形させます（初期値）

2. object-fit: cover;

指定したwidthとheightを埋めるように画像をトリミングします。この際、画像は指定したwidthとheightのうち、大きい方に合わせ自動でリサイズされます。background-size: cover; と同じ。

3. object-fit: contain;

指定したwidthとheightの中にきっちり納まるように画像を配置します。トリミングはされません。background-size: contain; と同じ。

4. object-fit: none;

指定したwidthとheightを埋めるように画像をトリミングします。画像はリサイズされません。

5. object-fit: scale-down;

containかnoneのうち、小さい方を表示させます。

使うのはcontainばっかりになりそうですが、他のも覚えておくといつか役に立つ日が来ると思います。

 

トリミング位置の調整

何も設定しないと中央を基準にトリミングされますが、「object-position」を使えばトリミング位置を調整することも可能。

object-position: 0 0; /* 横,縦 */

object-position: 100% 100%; /* 横,縦 */

pxでも指定できちゃう

object-position: 20px 30px; /* 横,縦 */

これを使うと、「WordPressで登録したサムネイルのトリミング位置を変更したい」という無茶振りにも割とスムーズに対応可能。

 

IEでも使う方法

このCSS、Internet Exploreで使えない！

最近はIE対応しないのがデフォルトの人も増えてきたようですが、残念ながらまだIE11対応しなきゃいけない場合のほうが圧倒的に多い。こんなに革命的に便利なのに、IEで使えないんじゃだめじゃん…

しかしご安心ください。若干手間が増えますが、IEでも使う方法があります。

それが、「object-fit-images.js（通称ofi）」と呼ばれるjsスクリプトを使用する方法。

以下のように記述して、ファイルを読み込み、処理を呼び出します。だいたいページのhead内か、</body>直前とかに書きますよね。

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
<script>objectFitImages();</script>

これでhtml側の準備はＯＫなんですが、CSSにも書き加える必要があります。

.your-favorite-image {
	object-fit: contain;
	font-family: 'object-fit: contain;';
}

positionも加える場合はこう

.your-favorite-image {
	object-fit: cover;
	object-position: bottom;
	font-family: 'object-fit: cover; object-position: bottom;';
}

「font-family」を使った謎の記述…どうなってるんですかねこれは…

ともかく、これでIEでも使えるようになります！よかったね。

 

それじゃ、バイバイ～！