私が愛してやまない待望の外接リサイズobject-fitを使うのにIEのせいであと1年半も待ってらんないっ！！（→祝・IEサポート終了！）

我々は何年待ったのか？このお手軽外接リサイズobject-fitの登場を！なのにIE11非対応って哀しすぎる。またしてもこの余生ブラウザにもどかしい思いを味わっているのだ。 Edge非対応OS、Windows7のサポート終了まで約1年半（2020年1月終了！）。だが、大丈夫。手はあるんです！

目次：

object-fitとは何ぞや

たとえばこんな記事一覧があったとする。

この左側の画像に、object-fitを使っています。 いったい何をしているのか。ここでやっているのは「外接リサイズ」です。

配置した画像

記事一覧に配置したのはこんな画像。

※正方形タイプ

サムネイルと同じ正方形。みんなこの比率ならまことに喜ばしい限り。恐悦至極に存じ上げ奉りたい。

※横長タイプ

でも実際の運営上は、このような横長画像もあれば…

※縦長タイプ

うわデカ！そう、縦長画像もありますわな。当然。

これを毎回フォトショップなどのグラフィックソフトで正方形にトリミングしてもいいのだが、Webサイト完成後の更新をクライアントに引き継ぐ場合は、毎回それをしてもらうのは負担になるわけです。

では、どうするか。CSSで自動的にトリミングしたい。それをかなえてくれるのが、そう。object-fit!!（fit...fit.. fit...fit..）←ディレイ

object-fitのコード

では、実際のコードを見ていきましよう。object-fitというのはCSSです。

※参考:【CSSの基本】書ける前に読む！HTML、CSS、JSの書式-3 - クモのようにコツコツと

CSSスタイルを当てる対象のHTMLはこんな感じ。

<h1>記事一覧</h1>
<ul class="of">
  <li><figure><a href="リンク先" target="_blank"><img src="画像パス" alt="正方形"></a></figure>
    <p class="title"><a href="リンク先" target="_blank">ぶろぐのたいとる、ぶろぐのたいとる、ぶろぐのたいとる1</a></p>
  </li>
    <li><figure><a href="リンク先" target="_blank"><img src="画像パス" alt="横長"></a></figure>
    <p class="title"><a href="リンク先">ぶろぐのたいとる、ぶろぐのたいとる、ぶろぐのたいとる2</a></p>
  </li>
    <li><figure><a href="リンク先" target="_blank"><img src="画像パス" alt="縦長"></a></figure>
    <p class="title"><a href="リンク先" target="_blank">ぶろぐのたいとる、ぶろぐのたいとる、ぶろぐのたいとる3</a></p>
  </li>
</ul>

ulリスト（.of）の中にimg画像とpタイトル（.title）があり、それぞれをaリンクで囲っている。

object-fitを設定しているのはimgです。

.of img {
  width: 100px;
  height: 100px;
  object-fit: cover;
}

幅width、高さheightはそれぞれ100pxの正方形で、その下にobject-fitプロパティがあり、値はcoverです。
このcoverが「外接リサイズ」です！！

いろいろなobject-fit

※ cover（外接リサイズ）
coverは外接リサイズ。外接リサイズとは、画像の短辺側がいっぱいになるようにリサイズすることで、見た目上は正方形枠のなかに隙間がなくなります。再掲します。

.of img {
  width: 100px;
  height: 100px;
  object-fit: cover; /*外接リサイズ*/
}

※contain（内接リサイズ）
containは内接リサイズ。内接リサイズは、画像の長辺側がいっぱいになるようにリサイズすることで、見た目上は正方形枠のなかに隙間ができるが画像はトリミングされず、すべて表示される。

.of img {
  width: 100px;
  height: 100px;
  object-fit: contain; /*内接リサイズ*/
}

外接リサイズと内接リサイズ、どっちがいいかってのはケース・バイ・ケースでしょうな。うむ。

※fill（縦横比無視！）
これははっきり言って使い道はないんだけど、画面いっぱいになるように縦横比を無視してリサイズする設定。
そして、これがなんとobject-fitの初期値！つまり、object-fitを何も設定しないとこの状態になるわけだ。（中国映画のエンドロールみたいな、と言ってわかる人はブラウン管世代…）

.of img {
  width: 100px;
  height: 100px;
  object-fit: fill; /*初期値*/
}

この初期値から長辺側いっぱいにする？短辺側いっぱいにする？と選択肢を拡げてくれるのがobject-fitってわけです。

object-fit前のおもひでぽろぽろ

object-fitが登場するまでは、画像を中央配置してリサイズするのは大変な手間でした。positionを駆使したりね…。

四辺に0入れてmargin: autoとか…
※参考：【CSS】レスポンシブでも使える！CSSだけで画像を縮小してトリミングしたサムネイルを表示する方法 - Qiita

transformで-50%動かしてみたり…
※参考：CSSだけで画像トリミングできたよ ｜ Tips Note by TAM

それがobject-fitたった1行で済むのはまさに感謝感激感動感涙モノなわけです！はい。

大問題！IEで見たらfillってるぢゃないか！！

と、ここまで見て、ほうほうこれは便利だ、と感じてくれたそこのあなた！あなたが見ているブラウザはズバリ、IEではないでしょう。
え？なんでわかったかって？はい。実はIEは最新のIE11でもobject-fit非対応なのですよ！キミィ！！

※IEで見るとどれもこう見えているはず…（初期値状態）

caniuseで見てみてみると…見てくれ！IEだけ真っ赤だなぁ〜
※参考：Can I use... Support tables for HTML5, CSS3, etc

IE11の寿命おさらい

何度かご紹介しているがWindows7はEdge非対応。デフォルトブラウザはIE11。ライトユーザーはこれを使う。

※参考：各Windows OSで利用できるIEのバージョンを知る：Tech TIPS - ＠IT

IE11の寿命は最低でもWindows7のサポートが終わる2020年1月までは続くと予想されます。あと約1年半だね。 （2020 年1月14日終了！）

※参考：ご存じですか? OS にはサポート期限があります! - Microsoft atLife

IE11のシェア23%！おちこんだりもしたけれど、IEはげんきです。
※参考：WebブラウザシェアランキングTOP10(日本国内・世界) | ソフトウェアテスト・第三者検証ならウェブレッジ

1年半も待てない！IE対策してくれるJSファイル

1年半も待てないよ！！（涙）大丈夫。考えよう、答えはある。

ありました。JSの「object-fit-images」を使うとIEでもobject-fitが適用されます！

※参考：GitHub - fregante/object-fit-images: 🗻 Polyfill object-fit/object-position on <img>: IE9, IE10, IE11, Edge, Safari, ...

しかしながら、このofi.jsというファイルをあと1年半のためだけにアップロードするのもなんだかなぁという気持ちがある。CDNでないかな？

ありました！！

<!--object-sit（IE対策）-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>

もうダウンロードもしてやんない！コピペでOK！！

ofi.jsの設定を有効にするにはJSファイルの中にobjectFitImages()というメソッドを書く必要があります。

//objedt-fit（IE対策）
objectFitImages();

なお、メソッドはHTMLファイルに直接書いてもOKです。ペライチの時とかね。

<!--objedt-fit（IE対策）-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.3/ofi.js"></script>
<script>objectFitImages();</script>

忘れちゃならねぇCSS追記でIE対策完了！

もう一つ、忘れてはならないのは、CSSのobject-fitの書いてあるimg内にこのfont-familyを追記すること。こないだもこれ、書き忘れてました（汗）

※IE対策後の外接リサイズ（cover）
font-familyの値はobject-fitと同じにする。coverならcoverに。

/*外接リサイズ*/
.of img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  font-family: 'object-fit: cover;';  /*IE対策*/
}

※IE対策後の内接リサイズ（contain）

containならfont-familyの値をcontainという具合に。

/*外接リサイズ*/
.of img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  font-family: 'object-fit: contain;';    /*IE対策*/
}

ということで、あと1年半はこのCDNで乗り切りませう！！！
ありがたやありがたや。

---

※参考：ネイティブHTML & CSSやってみたシリーズ
qiita.com