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対策についての関連記事 ▼▽▼

関連記事

  • text-alignが効かない時に考えられること

    2021.02.24

    【CSS】text-alignが効かない時に考えられること

    CSS

  • 2021.02.23

    【CSS】三角形の装飾でコンテンツの境界を区切る方法

    CSS

  • 2021.02.22

    【CSS】IEだけ崩れてしまうフォント対策

    CSS

おすすめ記事

  • 2020.11.28

    Basic認証の設定方法と注意点

    その他

  • 2020.12.02

    【css】スマホでパンくずを横スクロールさせる方法

    CSS

  • 2019.03.15

    【WordPress】固定ページにページネーションを効かせる方法

    WordPress

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design