前回まで、CSSのobject-fit、object-positionプロパティの使い方をご紹介しました。

【CSS】object-fitの使い方【img要素の縦横比固定方法】

CSSに「object-fit」プロパティで「cover」を設定することにより、画像の縦横比を固定したまま指定サイズで画像を配置する方法を紹介します。他にも「object-fit」プロパティにてどのように配置するか設定することも可能。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.24

【CSS】object-positionの使い方【img要素の画像配置設定】

img要素などの置換要素に対して、コンテンツをどこに配置するかを設定する「object-position」プロパティを詳しく紹介します。コピペで試せるサンプル付きなので、勉強にもどうぞ♪

nyanblog2222.com

2020.05.26

ただし、前回までの記事でも記載したように、このプロパティは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つの簡単なステップで対応ができるので、良かったら試してみてください。

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

投稿 【CSS】object-fit,object-positionのIE対応【object-fit-images】 は nyanblog ~にゃんぶろぐ~ に最初に表示されました。