CSS JavaScript

2021.10.19

【簡単3ステップ】IEにobject-fitを効かせ、画像を綺麗に見せる方法

img要素をbackground : coverのように画像を歪ませることなく要素の範囲全体を覆うことができる超便利プロパティのobject-fit!!
レスポンシブ対応には今や必要不可欠ですよね!

でもブラウザチェックの際にIEで見てみたら・・・なんと画像が歪んでいる!!どうして!?
Web初心者の方なら一度はこのような経験があるのではないでしょうか。
そう、object-fitはIE非対応なのです。。
でもあと数年でサポートが終わるし、IEの為だけに調整する時間を使うなんてもったいない!

今回の記事ではそんなobject-fitを かんたん3ステップ でIEに対応させることができるプラグインを使ってobject-fitを簡単に効かせる方法をご紹介します!

1:<head>内にobject-fit-imagesのCDNを貼り付ける

まずhtmlファイルの<head>内にobject-fit-images(ofi.js)のCDNを貼り付けます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>

あと数年でサポートが終了するのだし、object-fitのためだけにダウンロードなんてしてやんない!CDNで充分だ!
・・・と私は思うので、この方法を推奨しています。

いやいや、CDNで不具合とか起きたら嫌だしダウンロードしたいよ!
という方は下記リンクよりダウンロードしてご使用ください。

※どちらの方法でも設定方法は変わりません!

object-fit-imagesのダウンロードはこちら

https://github.com/bfred-it/object-fit-images

2:実行コードを記述する

プラグインの読み込みができたら、object-fit-imagesのプラグインを実行させるための記述をします。
書く内容はとても簡単で、下記どちらかの記述を1行書くだけで実行させることができます!

jQueryで記述する場合

jQueryで記述をする場合、きちんとjQueryが読み込まれていないと実行されません!
記述を書くのと合わせてobject-fit-imagesの前にjQueryが読み込まれているかを確認しましょう!

<script>$(function () { objectFitImages() });</script>

JavaScriptで記述する場合

JavaScriptで書きたいよという方は下記のコードになります。

<script>objectFitImages();</script>

3:IE用のcssを記述する

あとはcssでobject-fitを使った行の下にIE用の記述を書き足すだけで完了です!

要素内全体をimgで覆いたい場合

object-fit: cover;
font-family: 'object-fit: cover;'; /* IE対策 */

imgの縦横比を保って表示したい場合

object-fit: contain;
font-family: 'object-fit: contain;'; /* IE対策 */

+α:object-positionも使いたい場合

object-fitである程度綺麗にはなったものの、object-positionでもっと思った通りの位置に調整したい!
ということもあるかと思います。
object-positionもIEには未対応なのですが、object-fit-imagesを読み込んでいる場合はobject-fitに追記をするだけで効かせることができるのです!

書き方も簡単!IE用の記述の後ろにそのままobject-position: 〜;';を書くだけです!

object-fit: contain;
font-family: 'object-fit: cover; object-position: bottom;'; /* ;の後ろにそのまま記述 */

ポリフィルで効かせる方法

さらに簡単なのはIEでもobject-fitを効かせるためのスクリプト(ポリフィル)のfitie.jsを読み込む方法です。
ダウンロードをして入れるだけで効かせることができるため、実行コードもIE用のCSSを書く必要もなくとっても簡単ですが、少しデメリットもあります…。

  • CDNがないため、ダウンロードする必要がある。
  • object-positionが使えない。
  • object-fitを使っていなくてもスクリプトが動いてしまい、表示崩れを起こしてしまう可能性がある。

jsをあまり組まないサイトで、object-positionを使わない場合はfitie.jsでサクッと対応してしまう方が簡単です!

fitie.jsのダウンロードはこちら

https://github.com/jonathantneal/fitie

まとめ

いかがでしたか?
少しの記述で対応ができるのはとても便利ですよね!
是非ご活用ください(^o^)/

IE対策についての関連記事はこちら

この記事をシェアする

関連記事

  • 2022.02.25

    【CSS】グーやパーに変形!マウスカーソルに掴む動作を実装する方法

    CSS

  • 2022.01.24

    効率的なCSS記述になる!inherit の使い方

    CSS

  • 2021.11.02

    CSSのcursor:pointerが効かない時にまず確認したい3つのこと

    CSS

おすすめ記事

  • 2022.06.15

    スキルを上げたきゃ数をこなせ!1ヶ月毎日ロゴを作った話

    デザイン

    制作

  • 2022.04.28

    【カメラ初心者向け】物撮りが上手くなるコツ ~食べ物編~

    その他

    制作

  • 2022.04.12

    Chromeで画像やテキストがぼやけるときの対処法

    コーディング

    制作

×