spiqa logo

コーディング

IEにobject-fitを効かせる方法

2019.02.18 Mon. コーディング

こんにちは。 SPIQA事業部チーフコーダーの野口です。

 

img要素をbackground : coverのように画像を歪ませることなく要素の範囲全体を覆うことができる超便利要素のobject-fit!!

レスポンシブ対応には今や必要不可欠ですよね!

 

でもブラウザチェックの際にIEで見てみたら・・・なんと画像が歪んでいる!!どうして!?

Web初心者の方なら一度はこのような経験があるのではないでしょうか。

そう、IEはobject-fitに非対応なのです。。

でもあと数年でサポートが終わるし、IEの為だけに調整する時間を使うなんてもったいない!

 

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

 

 

 

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

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

 

あと数年でサポートが終了するのだし、ダウンロードなんてしてやんない!

CDNで充分だ!・・・と私は思うので、この方法を推奨しています。

 

 

いやいや、不具合とか起きたら嫌だし僕わたしはダウンロードしたいよ、という方は下記リンクよりダウンロードしてご使用ください。

 

【ダウンロードはこちら‣】 https://github.com/bfred-it/object-fit-images

 

 

 

② 実行コードを記述する

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

 

【<head>内に記述する場合】

 

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

 

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

 

 

 

③ IE用のcssを記述する

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

 

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

 

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

 

 

 

いかがでしたか?

是非ご活用ください(^o^)/

 

 

 

最新記事

もっと見る≫

カテゴリー

spiqa logo

スピカ

ホームページ制作、LP制作、広告運用はお任せください。
ロゴや名刺などのデザイン制作、また店舗販促物などもお作りします。
お客様の立場、ユーザーの立場の両方に立ち+αの価値を提供し続けます。

制作のご相談はこちらから