BLOG
ブログ

HOMEBLOG【CSS】object-fitが効かない・・IEやEdgeにも対応できる「object-fit-images」ライブラリ

【CSS】object-fitが効かない・・IEやEdgeにも対応できる「object-fit-images」ライブラリ2017.11.28

【CSS】object-fitが効かない・・IEやEdgeにも対応できる「object-fit-images」ライブラリ

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タグ全部に付け加える必要があるんで大量になると面倒だけど今はこの方法が一番いいのでオススメです。

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

CONTACT

ホームページに関する費用のこと、納期のこと、その他ご質問などお気軽にご相談下さい

受付時間:平日10:00~19:00 06-6626-9511