[WordPress]CSSの「object-fit」がIEで効かない時の解決方法！

アイキャッチ画像を一覧表示にするときに便利な「object-fit」ですが、
IEに対応してないんですね！

解決方法がないか探しました。
参考にしたのはこちらのサイトです。

まず「object-fit-images」の緑の「clone or download」ボタンをクリックしてダウンロードします。

使うのは「dist」フォルダー内にある「ofi.min.js」です。

JSは</body>タグの直前に設置。

[javascript]
<script src="/js/ofi.min.js"></script>
<script>
objectFitImages(‘img.object_fit_img’);
</script>
[/javascript]

CSSの記述。

[css]
.object_fit_img {
object-fit: cover;
font-family: ‘object-fit: cover;’
}
[/css]

HTML

[html]<img class="object_fit_img" src="images/test.jpg">[/html]

ってこれだけで完成のはずなんですが、Word Pressの場合一つ一つの画像ファイルにクラスをつけることが出来ないですよね。

そこで悩みましたが、こちらの方法で解決しました！

[php]<?php the_post_thumbnail(‘medium’, array(‘class’ => ‘object_fit_img’)); ?>[/php]

アイキャッチ画像にobject_fit_img　というクラスを付けることが出来ました！

IEには本当に悩まされますね～～(^-^;

＠ぽぽ