CSSプロパティ【object-fit】をIEに対応させる方法

WordPressなどのCMSでクライアント側がアップロードした縦長、横長、どんな画像サイズでも、枠内に納めて対応させたい時があります。

そんな時に便利なのが「object-fit」プロパティです。

「object-fit」プロパティを使うと画像を中央で切り取る取ることができ、任意の枠内に縦横比を保ったまま納めることができる大変便利なプロパティです。

しかしこのobject-fitプロパティは、IEやEageには対応してないみたいです。Internet Explorerなんてどうでもいいなんて言わずにIEくんにもちゃんと対応させてあげましょう

IEにobject-fitを対応させる方法

まずやり方ですが二通りあります

1.object-fit-imagesを使う
①ofi.jsの読み込み
②CSSの書き換え
③objectFitImages();関数の起動

2.fitie.jsを使う
①fitie.jsのDL
②fitie.jsの読み込み

fitie.jsはダウンロードして読み込むだけでという、とても単純明快簡単な作業なのですが、今回僕の場合は、fitie.jsではうまくいかず、object-fit-imagesを使用しました。

ですので二通りのやり方をご紹介します。

1. object-fit-imagesの使い方

ofi.min.jsのダウンロード

まずはGitHubで公開されているobject-fit-imagesをこちらからダウンロードします

GitHub object-fit-images

ofi.min.jsの読み込み

ofi.min.jsを読み込みましょう。bodyタグの直前に追加します。

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

ちなみにファイルはここにあります。”dist/ofi.min.js”

IEのためにダウンロードなんてしない！って方はCDNもありますのでこちらをどうぞ。

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>

スクリプトを呼び出し・実行

スクリプトを実行しましょう

<script> objectFitImages(); </script>

　記述場所ですがこちらもbodyタグの直前で大丈夫です。

IE用のCSSを追記

では次に IE用のCSSを記述していきます。

object-fitを使用したいセレクターに「font-family: ‘object-fit: 属性値;’; 」を追加します。

//要素内全体を覆いたい場合
object-fit: cover;
font-family: 'object-fit: cover;'; /*IE対策*/

//縦横比を保って表示したい場合
object-fit: contain;
font-family: 'object-fit: contain;'; /*IE対策*/

これでIEでもobject-fitプロパティ機能するようになりました。

こちらが、object-fit-imagesを使ったobject-fitプロパティのIE対応法です。

では次にもっと簡単なやり方をご紹介します。

2. fitie.jsの使い方

先ほどご紹介したobject-fit-imagesよりも簡単な方法がこちらです。

fitie.jsのダウンロード

ではまず、GitHubからfitie.jsをダウンロードしましょう。

GitHub fitie.js

fitie.jsの読み込み

ダウンロードしたfitie.jsを読み込みましょう。

ファイルパスは、”dist/fitie.js”です

bodyタグの直前に追加します。

<script src="fitie.js"></script>

以上です。

これだけでIEでobject-fitが効くようになります。

ちなみにfitie.jsではobject-positionプロパティは対応してないので、その場合はobject-fit-imagesを使用してください。