前回まで、CSSのobject-fit、object-positionプロパティの使い方をご紹介しました。
ただし、前回までの記事でも記載したように、このプロパティはIEには対応しておらず、別途対応する必要があります。
今回はIEに対応させるobject-fit-imagesを使用して、object-fit、object-positionプロパティを有効にできる方法を紹介していきます。
object-fit-imagesライブラリを有効にする
まずは、object-fit-imagesライブラリを有効にしていきます。
方法は2つあり、
1つはCDNを読み込む方法。
もう1つはダウンロードしたファイルを読み込む方法。です。
CDNを貼り付ける
CDNとは、「Content Delivery Network」の頭文字を取った略称で、「コンテンツ配信ネットワーク」を指します。
簡単に言うと、ネットワーク上に配置されているファイルにアクセスできる仕組みのことです。
この仕組みを使うとサーバの負荷を一部肩代わりしてくれるようになるため、レスポンスが早くなると言われています。
htmlにscript要素を使って、CDNを読み込ませます。
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>ダウンロードしたファイルを読み込む
こちらのサイトから「Clone or download」をクリックしてダウンロードしてください。
https://github.com/bfred-it/object-fit-images
ダウンロードしたファイルの中から「ofi.js」ファイルを読み込む設定をhtmlのscript要素で設定します。
<script src="ofi.min.js"></script>img要素にクラスを追加
object-fit、object-positionプロパティを使用するimg要素にクラスを追加します。
クラス名は任意で問題ないので、既にクラスを指定している場合はそのクラスを使っても大丈夫です。
<img src="img/01.jpg" class="object-image">CSSに”font-family”プロパティを設定
2～5行目まではimgのサイズ設定と処理結果が分かりやすいように、背景色と境界線を設定しています。
7、8行目：object-fit、object-positionプロパティを設定しています。
10行目：IE用に「font-family」プロパティを設定します。値は7、8行目で設定した値と同じ値を設定します。
object-image{
width: 400px;
height: 300px;
background-color: #999;
border: 1px solid #666;
object-fit: none;
object-position: right;
// IEのブラウザに対応
font-family: 'object-fit: none; object-position: right;';
}10行目があれば、7、8行目は不要なのかも？と思い、試してみましたが、object-fit、object-positionが反映されなかったので、別々に記述が必要みたいです。
JavaScriptの記述を追加
htmlファイル内の</body>の直前にscript要素を追加し、objectFitImages関数を呼び出します。
全てのimg要素に対応させる場合は引数なし。
任意のクラスに画像を対応させたい場合は引数に「img.クラス名」を設定します。
※ クラス名のみでは、反映されないので、注意してください。
// 全てのimg要素に対応
<script>
objectFitImages();
</script>
// 指定のimg要素のクラスに対応
<script>
objectFitImages('img.object-image');
</script>処理結果
ここまで設定が終わりましたら、処理結果を見てみましょう。
このページをIEで開き、対応前と比較して対応後ではobject-fitが効いていることを確認してみてください。
他のブラウザでは対応前と対応後では一緒の動きをしています。
object-fit-images対応前
object-fit-images対応後
まとめ
いかがでしたでしょうか。
今回は「object-fit-imagesライブラリ」を使って、IEのブラウザにobject-fitを対応させてみました。まだまだIEのブラウザは使用されているので、対応させて損はないと思います。
※ 2022年6月15日でサポート終了予定
4つの簡単なステップで対応ができるので、良かったら試してみてください。
今回の記事が何かの参考になれば幸いです。
ご来訪ありがとうございました。それでは♪
