CSS JavaScript

2019.02.08

【簡単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対策についての関連記事はこちら

関連記事

  • 2021.10.01

    【コピペで簡単!】CSSのみで作るシンプルなセレクトボックス(矢印の消し方や枠のサイズ変更方法も解説)

    CSS

  • 2021.09.28

    読み込みが終わったら処理!onloadイベントの使い方と注意点について解説【JavaScript】

    JavaScript

  • 2021.09.24

    JavaScriptの勉強におすすめの本7選【初心者〜上級者別に厳選】

    JavaScript

おすすめ記事

  • 2021.06.30

    【おすすめ書籍】Sassを始めてみるならこの1冊

    CSS

  • 2021.09.14

    【薄くて軽い!】超おすすめパソコンスタンド

    その他

  • 2021.08.31

    超簡単!Wordpressにヒートマップを導入する方法

    WordPress

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!