IEでもobject-fitが使えるようにするjQuery

WordPressなどのブログのアイキャッチ使用時の画像のサイズ調整に便利なのがobject-fit。

しかし、IE非対応です。

そのため、object-fitを使うとIEでは画像が変形してしまいます。

最新のEdgeは対応済みのようで崩れませんでした。

根強いIEユーザーのために入れておきましょう。

設置方法

まずはGitHubでダウンロード

object-fit-imagesのダウンロードをします。

ダウンロードをしたらHTMLファイルに読み込みます。

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

調整したい画像を設置

<img class="object-fit" src="画像のパス.jpg">

CSSを記述

.object-fit{
  object-fit: contain;
  font-family: 'object-fit: contain;'
}

最後にスクリプトを呼び出して実行

objectFitImages('自分がcssを書いた場所')

<script>
  objectFitImages('img.object-fit-img');
</script>