CSSの「object-fit」プロパティすごく便利ですよね！

WordPressで構築した案件でクライアント側で事例画像などを更新する場合に一々画像ソフトを使ってトリミングなどをしなくても枠内に綺麗に収まってくれますからね。

ただ、残念ながらPCではIEやEdgeには対応してないのです。

そこで今回ご紹介するのが「object-fit-images」というライブラリです。
早速ダウンロードしてみましょう！

object-fit-imagesの設定

まずはJSの読み込みから。
</body>タグの直前に設置。

<script
 src="ofi.min.js"
></script>
<script>
  objectFitImages('img.object_fit_img');
</script>

続いてCSSの追加記述。
IE用にfont-familyを指定。

.object_fit_img {
  object-fit: cover;
  font-family: 'object-fit: cover;'
}

後は出力用HTMLにclassを付けて完了。

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

反映させたいimgタグ全部に付け加える必要があるんで大量になると面倒だけど今はこの方法が一番いいのでオススメです。

皆さんも是非使ってみて下さい！

この記事を書いた人

staff_01