2022.07.27
【サイトレビュー#38】様々なホバーアクションが面白いクリエイティブス...
その他
2021.10.19
img要素をbackground : coverのように画像を歪ませることなく要素の範囲全体を覆うことができる超便利プロパティのobject-fit！！
レスポンシブ対応には今や必要不可欠ですよね！
でもブラウザチェックの際にIEで見てみたら・・・なんと画像が歪んでいる！！どうして！？
Web初心者の方なら一度はこのような経験があるのではないでしょうか。
そう、object-fitはIE非対応なのです。。
でもあと数年でサポートが終わるし、IEの為だけに調整する時間を使うなんてもったいない！
今回の記事ではそんなobject-fitを かんたん３ステップ でIEに対応させることができるプラグインを使ってobject-fitを簡単に効かせる方法をご紹介します！
目次
まず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
プラグインの読み込みができたら、object-fit-imagesのプラグインを実行させるための記述をします。
書く内容はとても簡単で、下記どちらかの記述を1行書くだけで実行させることができます！
jQueryで記述をする場合、きちんとjQueryが読み込まれていないと実行されません！
記述を書くのと合わせてobject-fit-imagesの前にjQueryが読み込まれているかを確認しましょう！
<script>$(function () { objectFitImages() });</script>JavaScriptで書きたいよという方は下記のコードになります。
<script>objectFitImages();</script>あとはcssでobject-fitを使った行の下にIE用の記述を書き足すだけで完了です！
object-fit: cover;
font-family: 'object-fit: cover;'; /* IE対策 */object-fit: contain;
font-family: 'object-fit: contain;'; /* IE対策 */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を書く必要もなくとっても簡単ですが、少しデメリットもあります…。
jsをあまり組まないサイトで、object-positionを使わない場合はfitie.jsでサクッと対応してしまう方が簡単です！
fitie.jsのダウンロードはこちら
https://github.com/jonathantneal/fitie
いかがでしたか？
少しの記述で対応ができるのはとても便利ですよね！
是非ご活用ください(^o^)/
IE対策についての関連記事はこちら
[card url=”https://note.spiqa.design/wp/ie-font/”]
[card url=”https://note.spiqa.design/wp/firefox-scroll/”]
[card url=”https://note.spiqa.design/wp/position-sticky-error/”]
この記事をシェアする
株式会社スピカデザイン
https://spiqa.design/
spiqa_design