CSS

2019.02.08

【css】IEにobject-fitを簡単に効かせる方法

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

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

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

① <head>内にCDNを貼り付ける

まずhtmlファイルの<head>内に下記のCDNを貼り付けます。

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

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

いやいや、不具合とか起きたら嫌だし僕わたしはダウンロードしたいよ、という方は下記リンクよりダウンロードしてご使用ください。
【ダウンロードはこちら】 
https://github.com/bfred-it/object-fit-images

② 実行コードを記述する

次にプラグインを実行させるjQueryを記述します。

<head>内に記述する場合

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

別ファイル.jsに記述する場合

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

objectFitImages();

③ IE用のcssを記述する

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

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

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

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

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

いかがでしたか?
是非ご活用ください(^o^)/

▼▽▼ IE対策についての関連記事 ▼▽▼

+1

関連記事

  • 2021.04.21

    【CSS】要素がはみ出てしまう時のチェック事項 / box-sizingの指定

    CSS

  • 2021.04.09

    コーディング作業に役立つサイト5選

    CSS

    その他

  • 2021.04.07

    【CSS】背景色のみを透過する方法

    CSS

おすすめ記事

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • 2021.04.05

    【jQuery】jQueryのみでPC/SPの画像を切り替える方法

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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