【CSS】たった1行のコピペで簡単！object fitで画像をトリミングする方法

FUNA

こんにちは、リバティエンジニアのFUNA（フナ）です。現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

今回はCSSの「object-fit」についてどのような時に使うのか、その使い方や応用の仕方について解説します。

【PR】:  フリーランス向け求人・案件を探すならこの3サイトがおすすめ！

object-fitの基本

「object-fit」プロパティは、<img>タグや<video>タグなどの中身を、どのようにはめ込むかの設定をすることができます。

この「object-fit」プロパティでは以下の値が使用できます。

object-fit: fill; とは

「fill」を設定すると要素のボックス全体を埋めるサイズになります。

オブジェクト全体が完全にボックスの中を埋めるので、オブジェクトとボックスのアスペクト比が合わない場合は、オブジェクトが合うように引き伸ばされます。

object-fit: contain; とは

「contain」を設定するとアスペクト比を維持したまま、要素のボックスに収まるように拡大縮小されます。

オブジェクト全体がアスペクト比を維持したままボックス内に表示されて、オブジェクトとボックスのアスペクト比が合わない場合はレターボックス表示されます。

object-fit: cover; とは

「cover」を設定することでアスペクト比を維持したまま、要素のボックス全体を埋めるように拡大縮小されます。

オブジェクトのアスペクト比がボックスのアスペクト比と合わない場合、オブジェクトがボックスに合うように切り取られます。

object-fit: none; とは

「none」を設定すると、オブジェクトは拡大も縮小もされません。

object-fit: scale-down; とは

「scale-down」を設定した場合、コンテンツは「none」又は「contain」を指定したかのようにサイズが決められ、オブジェクトの実際のサイズが小さいほうを採用します。

画像を中央の位置でトリミングする方法

<img>要素に「object-fit: cover;」を指定するだけで、簡単に画像を中央の位置でトリミングすることができます。

See the Pen css object-fit-1 by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

FUNA

画像サイズは縦横のうち小さい方を基準に、自動で拡大・縮小されて、ボックスからはみ出した部分はトリミングされます。

画像を任意の位置でトリミングする方法

上記の方法では画像の基点を中央にしか設定できませんでしたが、それ以外の任意の位置を基点にすることも可能です。

方法としては、object-fitはcoverのままで「object-position」を設定します。

See the Pen css object-fit 2 by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

FUNA

「object-position」は％での指定ができるので、自由自在に好きな位置に設定できますね。

トリミングせずに余白を表示する方法

「object-fit」では画像をトリミングせずに余白を表示する方法もあります。

先ほどは「object-fit: cover;」を使いましたが、余白を表示するには「object-fit: contain;」に変えるだけで実装可能です。

See the Pen css object-fit 3 by TAKUYA FUNABIKI (@takuya20180216) on CodePen.

FUNA

ここではわかりやすく背景色を追加していますが、画像の幅か高さの大きい方にサイズを合わせて比率を保持して画像を表示しているのがわかりますね。

【注意】Internet Explorerには非対応

画像のトリミングをするのに簡単に利用できる「object-fit」ですが、残念ながらIE（Internet Explorer）には対応していません。

FUNA

もちろんIEに対応しないといけない場合にも、対策はありますのでご紹介します！

「object-fit」をIEに対応させる２つの方法

「object-fit」をIEに対応させる方法は以下の２つの方法があります。

方法①「object-fit-images」を使う方法

手順は以下の通り。

 ①object-fit-imagesをダウンロード

まずはGitHubで公開されている「object-fit-images」をダウンロードしましょう。

IE対応のためにダウンロードするのは面倒という方はCDNでも対応可能ですので、ダウンロードせずに次の手順へ進んでください。

 ②ofi.min.jsの読み込み、呼び出し・実行

ここから記述するscriptは「</body>」タグの直前に記述してください。

FUNA

HTMLファイル内でのscriptの記述場所は諸説ありますが、本来はそのプロジェクトやスクリプトの用途に合わせて使い分けるべきです。

先ほどダウンロードした「ofi.min.js」をプロジェクトの任意の場所に保存して読み込みます。

/* srcのURL指定はソースの保存先を指定してください。 */
<scrpt src="js/ofi.min.js"></script>

※CDN利用の方は上記ではなく下記を記述してください。

/* CDNの読み込み */
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>

では読みんだスクリプトを実行します。

/* スクリプトの実行 */
<script> objectFitImages(); </script>

 ③IE対応用のCSSを追記

最後にIE対応用のCSSを追記しましょう。

「object-fit」を使用するセレクターに「font-family: ‘object-fit: 属性値;’; 」を追加します。

object-fit: cover;
/*IE対策用CSS*/
font-family: 'object-fit: cover;';

これで「object-fit」をIE対応させることができます。

では次にさらに簡単な方法をご紹介します。

方法②「fitie.js」を使う方法

次にご紹介するのは「object-fit-images」よりも簡単な方法です。

手順はたったの２つだけです。

 ①「fitie.js」のダウンロード

GitHubからfitie.jsをダウンロードしてください。

 ②「fitie.js」の読み込み

ダウンロードしたfitie.jsを読み込みましょう。

/* object-fitのIE対応用JS読み込み */
<script src="fitie.js"></script>

たったのこれだけで対応完了です。

FUNA

もしIE対応が必要だけど「object-fit」を使いたい場合には、これらの方法を使っていくと良いでしょう。

関連記事