プラカンブログSTAFF BLOG

2018.08.30

【CSS】画像のトリミングができる「object-fit」

こんにちは。デザイナーのSUZUKIです。
今回は画像のトリミングができる「object-fit」プロパティを紹介します。

画像のサイズや縦横比が統一されておらず、キレイに表示できないことがあります。
またPCやスマホなど画面解像度の種類が増え、画像の見え方が異なるケースも出てきました。
その場面ごとに画像のトリミング調整をするのも大変です。

「background-size」プロパティが見え方の調整をするのにいいのですが、
背景処理になり、imgタグで処理したいときに対応できません。

そこで今回紹介する「object-fit」プロパティがとても便利です。
imgタグとして扱い、縦横比を保ちつつ、
「background-size」プロパティに似た処理が可能です。
早速指定の仕方を紹介します。

「object-fit」の概要

「object-fit」をわかりやすく理解してもらうために
横長と縦長の写真を正方形にトリミングします。

指定は下記のように「object-fit: cover;」と指定するだけです。

img {
width: 250px; /* 任意の幅を指定 */
height: 250px; /* 任意の高さを指定 */
object-fit: 「cover」;
}

 

結果は上記画像のように、縦横比を維持しつつ、画像の中央の位置を起点にトリミングします。
とても簡単で、便利ですね!

「object-fit」の値

上記の「cover」以外にも値があるので、状況に合わせて使い分けするといいでしょう。

fill 初期値。画像が要素内を満たすサイズになります。結果縦横比が変わる場合があるので注意。
contain 画像が縦横の大きい方のサイズに合わせて縦横比を維持しつつ、要素内を満たすサイズになります。
cover 画像の縦横比を維持しつつ、縦横の小さい方が要素に合うサイズになり、はみ出した部分はトリミングされます。
none 画像は要素の幅や高さを無視し、そのまま表示します。
scale-down 画像は「none」または「contain」を指定した扱いになり、表示したい画像が要素よりも小さい場合「none」として表示します。

トリミング位置の指定

何も指定しなければ、画像の中央の位置を起点にトリミングしますが、
任意の位置を指定したい場合は「object-position」を使います。
object-position: 横の位置 縦の位置;
※位置の指定は%でもpxでも可能です。

IEとEdge対応

とても優秀な「object-fit」ですが、唯一の欠点があります。
IEとEdgeに対応していません。
残念でなりません・・・

IEとEdgeに対応しないことはできないので、
「object-fit-images」を使い、対応していきます。

1. ファイルのダウンロード

必要なファイルを下記ページの右上の「Clone or download」から一式ダウンロード。
https://github.com/bfred-it/object-fit-images

ダウンロードしたファイルから「ofi.min.js」を読み込みます。

<script src="ofi.min.js"></script>

2. 画像にクラスの追加

「object-fit-images」を使いたい画像のimgタグに「obj-fit-img」というクラスを追加します。
※今回は「obj-fit-img」というクラスにしていますが、任意のクラスで問題ありません。

<img class="obj-fit-img" src="img/トリミングしたい画像.jpg">

3. CSSに「obj-fit-img」記述を追加

ここで大事なことは、「font-family」としてIEとEdge用の記述を追加します。

.obj-fit-img {
object-fit: cover;
object-position: 0 100%;
font-family: 'object-fit: cover; object-position: 0 100%;'
}

4. 最後に「object-fit-images」を呼び出すスクリプトの記述

HTMLの</body> の前に呼び出すコードを記述します。

○すべての画像に対応させる場合

<script>
objectFitImages();
</script>

 

○任意のクラスの画像に対応させる場合

<script>
objectFitImages('img.任意のクラス');
</script>

以上で「object-fit」の説明は終わります。

まとめ

CSSだけで指定ができ、簡単かつ便利なプロパティです。
IEとEdgeに対応する必要があるのだけがネックですが、
そこまで複雑ではないので、導入する価値はあります。
無駄なHTMLタグもCSSコードも減るので、ぜひ試してみてください!

参考リンク

下記は参考にしたサイトになります。
詳しく知りたい方はどうぞ。

https://www.webcreatorbox.com/tech/object-fit
https://app.codegrid.net/entry/css-object
https://developer.mozilla.org/ja/docs/Web/CSS/object-fit

+dc (鈴)

この記事は、SUZUKI が書きました。