object-fit:cover;を利用して、簡単にトリミングを実行する

object-fit:cover;の設定

まずは、下記のデモを確認してください。こちらはサンプル画像をもとに、左側にobject-fit設定無、右側がobject-fit設定有を行ったモノです。

確認してもらうとわかるように、左側の写真は縦につぶれたように表示されているのに対し、右側の写真は中央でトリミングされています。このように、object-fit:cover;を利用することで、簡単にトリミングを実行することができます。

object-fitの値

object-fitには下記のような値が存在しています。詳細については、下記のページを参考にしてください。

• object-fit - CSS: カスケーディングスタイルシート | MDN

IEに対応する

object-fitは非常に便利なCSSプロパティですが、IEには対応していないため、そのまま利用するとObject-fitが適用されずに表示されています。そのため、外部jsを利用して、IEでの表示対応を行う必要があります。

• Can I use... Support tables for HTML5, CSS3, etc

object-fitを適用させるjsは2つあるので、Webサイトに他に利用しているjsとの相性を考えて選択してください。

object-fit-imagesの利用

1.object-fitの読み込み

下記のコードを記述して、object-fitを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>

2.スクリプトの実行

スクリプトを実行するための記述を追加します。

<script>objectFitImages();</script>

3.CSSの記述

object-fitが記述されている箇所に、「font-family:'object-fit: 属性値;';」を記述します。

object-fit: cover;
font-family: 'object-fit: cover;'; 

以上で設定が完了です。これで、IEでもobject-fitが適用された形で表示されます。

fitie.jsの利用

1.ダウンロードして読み込み

下記のリンクからfitie.jsをダウンロードします。

• GitHub

2.fitie.jsの読み込み

ダウンロードしたファイルからfitie.jsを取り出し、リンクします。

<script src="fitie.js"></script>

以上で設定が完了です。

コラム カテゴリ

コラム一覧