大阪のホームページ制作ならGreen Hill

WEBマーケティングマガジン

WEB Marketing Journal

CSS

2022.4.13

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

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

この記事を書いた人

staff_01

・Contact
ホームページ制作の
お問い合わせ

オンラインでのご相談も随時承ります!

集客についておなやみの方、
ホームページ制作をお考えの方、
ご要件が定まっていない状態からでも、
お気軽にお問い合わせください!

お電話でのお問い合わせはこちら

06-6626-9511