2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
WEB制作のあれこれがわかる！
WEB制作のあれこれがわかる！
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のダウンロードはこちら
プラグインの読み込みができたら、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のダウンロードはこちら
いかがでしたか？
少しの記述で対応ができるのはとても便利ですよね！
是非ご活用ください(^o^)/
IE対策についての関連記事はこちら
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design
https://spiqa.design/