CSS

2019.02.08

【簡単3ステップ】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.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.07.14

    CSSだけで固定背景(パララックスデザイン)を実装する方法【iOS対応方法も紹介】

    CSS

  • 2021.07.13

    (簡単)inputをクリックしたときの枠線の色を変える

    CSS

おすすめ記事

  • 2021.06.30

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

    CSS

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

株式会社スピカデザイン

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

https://spiqa.design/

spiqa_design

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

REQUEST

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