ウェブデザイナーの毎日のお仕事のメモ

作成日:2021.06.01  最終更新日:2021.06.01

js / jQuery

IEでもobject-fitを対応させたい場合のofi.jsの使い方

どうしてもIEでobject-fitを対応させたい場合に使えるプラグイン、ofi.jsの使い方のメモです。

ofi.jsの使い方手順

①ファイルのダウンロード

object-fit-images のページにアクセスしします。
右上の緑色の『Code』ボタンをクリックすると、ダウンロードリンクが表示されます。

②ダウンロードしたファイルを任意のフォルダに設置する

ダウンロードしたファイルは以下のような状態です。

使用するファイルは、ofi.min.jsです。任意のフォルダにこちらのファイルを設置してください。

③ファイルを読み込む

任意のフォルダに設置したファイルを読み込みます。
※ファイルの読み込みパスは、ご自身の環境に合わせて変更してください。

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

④ofi.jsを動かすコードを書く

ofi.jsを動かすためには、以下のコードを、bodyの閉じタグの前、もしくは、DOMを全て読み込んだ状態になった後に読み込まれる箇所に以下を書いてください。

objectFitImages();

jqueryの場合は、

$(function () { objectFitImages() });

です。

HTML

もしHTMLに直接上のコードを書く場合、以下のようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Title</title>

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

<img class="object-fit-test" src="test.jpg">
ここに画像などコンテンツが入ります。

<script>objectFitImages();</script>
</body>
</html>

CSS

上のhtmlの中の、.object-fit-test というクラスの画像に、object-fit: cover;というcssをかけたい場合は、
以下のように、『font-family: 'object-fit: cover;'』を追加します。

.object-fit-test {
  object-fit: cover;
  font-family: 'object-fit: cover;'
}

もし、 object-position を記述している場合は、以下のように、書きます。

.object-fit-test {
	object-fit: cover;
	object-position: bottom;
	font-family: 'object-fit: cover; object-position: bottom;';
}

サンプル

以下、サンプルです。IEで見ても、他のブラウザと変わらない表示になっているかと思います。
IEで確認してみてください。

他にももう少し細かい設定ができるようなので、時間があるときに追記していきます。

最新記事