CSSのobject-fitをIEに対応させる方法 JavaScriptを使用します【object-fit-images】

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

CSSだけではobject-fitをIEに対応させることは出来ないので、JavaScriptのobject-fit-imagesを使用します。

インストール方法

スクリプトタグとNPMの2種類を紹介します。
各自環境に合った方法をご選択ください。

スクリプトタグ

以下よりダウンロードしてください
https://github.com/fregante/object-fit-images

Clone or download　→　Download ZIP

ダウンロードしたZIPを解答したらdistフォルダのofi.min.jsをスクリプトタグで読み込み

html
<script src="path/to/ofi.min.js"></script>

パスは各自合わせてください。

NPM

ターミナル
npm install --save object-fit-images

javascript
import objectFitImages from 'object-fit-images';

実行

javascript
objectFitImages();

一旦これで準備は完了です。
それでは次はHTMLとCSSを書いていきます。

HTMLのimgタグで画像を設置

html
<div class="c-image">
  <img src="https://dl.dropbox.com/s/u80jzptryxja7q9/sample03.jpg?dl=0" alt="" class="c-image__content">
</div>

普通にimgタグを使用

CSSでobject-fitを使用

css
.c-image {
  width: 400px;
  height: 400px;
  margin-left: 50px;
}

.c-image__content {
  width: 100%;
  height: 100%;
  object-fit: cover;
    object-position: 50% 50%;
    font-family: 'object-fit: cover; object-position: 50% 50%;';
}

ここで注目するのはfont-family: 'object-fit: cover; object-position: 50% 50%;';です。
なぜfont-familyを?と疑問に思うかもしれませんがobject-fit-imagesというjsはfont-familyにobject-fitとobject-positionを記述することでIEに対応することができます。

※例のobject-position: 50% 50%;はデフォルト値なので変更しない場合は記述しなくても大丈夫です。

IEでの表示

その他書き方例

以下の例は実用性のない書き方ですがプロパティの記述例として見てください。
ちゃんとIEでも動作します。

css
.c-image__content {
  width: 100%;
  height: 100%;
  object-fit: contain;
    object-position: bottom;
    font-family: 'object-fit: contain; object-position: bottom;';
}

.c-image__content {
  width: 100%;
  height: 100%;
  object-fit: cover;
    object-position: -100% 80px;
    font-family: 'object-fit: cover; object-position: -100% 80px;';
}

Sassを使用している方はmixinにすると便利！

ここまでobject-fit-imagesを使ってobject-fitをIEに対応する方法を紹介しましたが
object-fit-images用のプロパティを書くのがとにかく面倒！
だからmixinにします。

mixin

下記をコピペしてください。

object-fit.scss
@mixin object-fit($type, $pos-x: 50%, $pos-y: 50%) {
    object-fit: $type;
    object-position: $pos-x $pos-y;
    font-family: #{'"object-fit:'$type'; object-position:'$pos-x $pos-y'"'}
}

使い方

下記のようにスッキリ記述できます。

scss
.c-image__content {
  width: 100%;
  height: 100%;
  @include object-fit(cover);
}

.c-image__content {
  width: 100%;
  height: 100%;
  @include object-fit(contain, $pos-y: bottom);
}

@include object-fit({coverやcontainなどタイプ}, {object-positionのX}, {object-positionのY});

第2引数以降はデフォルト値を設定しているのでいるので調整しない場合は書かなくて大丈夫です。

コンパイル後

object-fit-images用のプロパティが記述されて出力されます。

css
.c-image__content {
  width: 100%;
  height: 100%;
  object-fit: cover;
    object-position: 50% 50%;
    font-family: 'object-fit: cover; object-position: 50% 50%;';
}

.c-image__content {
  width: 100%;
  height: 100%;
  object-fit: contain;
    object-position: bottom 50%;
    font-family: 'object-fit: contain; object-position: bottom 50%;';
}

最後に

object-fitは使用頻度も高く非常に便利なプロパティですがまだIE対応しないといけない案件が多く、今回ご紹介したobject-fit-imagesはすごく重宝しております。