webcreator.me

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

ライブラリ「object-fit-images」ここからダウンロードします。
https://github.com/bfred-it/object-fit-images

読み込みます。

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

呼び出します。

<script>
objectFitImages();
</script>

上記ではすべての画像を対象に処理がされます。
特定のクラスのみに処理を実行する場合は以下のように設定します。

//imgタグ
<img class="hoge" src="/photo.jpg">

//スクリプトの実行
<script>
objectFitImages('.hoge');
</script>

ｃｓｓ

.hoge {
object-fit: cover;
font-family: 'object-fit: cover;'
width: 好きな値px;
height: 好きな値px;
}

これでobject-fitをIEにも適応させることができます。