【CSS】object-fit,object-positionのIE対応【object-fit-images】

スポンサーリンク
アイキャッチ 猫HTML/CSS
スポンサーリンク

前回まで、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-image確認

object-fit-images対応後

object-fit-image確認
スポンサーリンク

まとめ

いかがでしたでしょうか。
今回は「object-fit-imagesライブラリ」を使って、IEのブラウザにobject-fitを対応させてみました。
まだまだIEのブラウザは使用されているので、対応させて損はないと思います。
2022年6月15日でサポート終了予定

4つの簡単なステップで対応ができるので、良かったら試してみてください。

今回の記事が何かの参考になれば幸いです。
ご来訪ありがとうございました。それでは♪

本ブログで一押しのオンラインスクールのご紹介♪




本ブログで一押しのオンラインスクール「Udemy」
筆者も利用しているスクールで、日頃の隙間時間に好きな講座が学べるので大活躍です♪

ジャンルが豊富で学びたい講座がきっとみつかる

AI・データサイエンスなど最先端のIT技術からプレゼンなどビジネススキルに関する講座まで15.5万以上(※海外講座含む)あるため、自分が学びたい講座をみつけることができます

お手頃な価格帯

1講座あたり数千~数万円程度で実践的なスキルアップが可能です。
講座は一度購入すれば視聴期限なく受講でき、30日返金保証もついているので安心して始めることができます。

学びやすい多彩な機能

0.5~2倍の変速機能で自分のペースで受講が可能、専用アプリを使えばスマホからオフライン環境でも視聴が可能です!
また、講師に直接掲示板から質問ができるので疑問を解決し自学自習をサポートしてくれます。

購入前に視聴できますので、是非興味のある方は↓をクリックしてみてください。




HTML/CSSJavaScriptプログラミング
スポンサーリンク
nyanblog
タイトルとURLをコピーしました