object-fitに関する覚書

画像をトリミングするCSSプロパティ「object-fit」と、同様の効果をIEにも対応させるJavascript「object-fit images」に関する覚書です。

object-fitプロパティの値

まずは基本。object-fitプロパティで画像を指定したボックスサイズに収める方法をまとめます。

object-fitプロパティの使い方は以下のとおりです。横幅と高さは[px]か[％]で指定します。

img {
    width: 【ボックス横幅のサイズ】;
    height: 【ボックス高さのサイズ】;
    object-fit: 【値】;
}

サンプルページ

fill（初期値）
縦横比を変えてボックス内を満たす

cover
縦横比を保持したまま短辺をボックスサイズに合わせてトリミング

contain
縦横比を保持したまま長辺をボックスサイズに合わせて縮小（余白ができる）

none
リサイズせずにボックスサイズに合わせてトリミング

サンプルページのCSSは以下のようになっています。

img.fill {
    width: 250px;
    height: 250px;
    object-fit: fill;
}

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

img.contain {
    width: 250px;
    height: 250px;
    object-fit: contain;
}

img.none {
    width: 250px;
    height: 250px;
    object-fit: none;
}

object-position プロパティ

次はギャラリーページでも使っている「object-position」プロパティです。画像のフォーカスしたい部分に合わせてトリミングしたい場合に使います。

サンプルページ

例１：trim1（object-positionなし）
横幅を100%、高さ100pxでトリミング

例２：trim2（object-positionあり）
横幅を100%、高さ100px、上から40%の位置でトリミング

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

img.trim2 {
    width: 100%;
    height: 100px;
    object-fit: cover;
    object-position: 100% 40%;
        }

Object-fit images.JSの使い方

ofject-fitプロパティは非常に便利ですがIEには対応していません（Edgeは対応済み）。なのでJavascriptを使って同様の効果を再現します。

ファイルの入手と実行部分の記入

Githubからファイルをダウンロードし、distフォルダ内の「ofi.min.js」を使用します。今回はhtmlページと同一階層内にある「js」フォルダ内に入れています。

<!-- ファイルの読み込み -->
<scrpt src="../js/ofi.min.js"></script>

<!-- ファイルの呼び出しと実行 -->
<script>
  objectFitImages('img.object-fit-img');
</script>

上記を</body>タグの直前に書いて読み込ませます。ついでに呼び出しと実行部分も書きます。

HHTMLにコードを記入

<img class="object-fit" src="【画像のファイル名】.jpg">

CSSにコードを記入

次はCSSです。「幅100%、上から40%の位置で切り取る」場合、「object-fit」というクラスに以下のコードを記入します。

.object-fit{
  object-fit: cover;
　object-position: 100% 40%;
  font-family: 'object-fit: cover; object-position: 100% 40%;'
}

以上でibject-fit imagesの実装は完了です。