イイダリョウのブログ。私が愛してやまない待望の外接リサイズobject-fitを使うのにIEのせいであと1年半も待ってらんないっ!!2018-05-24私が愛してやまない待望の外接リサイズobject-fitを使うのにIEのせいであと1年半も待ってらんないっ!!CSS我々は何年待ったのか?このお手軽外接リサイズobject-fitの登場を!なのにIE11非対応って哀しすぎる。してもこの余生ブラウザにもどかしい思いを味わっているのだ。Edge非対応OS、Windows7のサポート終了まで約1年半(2020年1月)。手はあるんです!目次:object-fitとは何ぞや配置した画像object-fitのコードいろいろなobject-fitobject-fit前のおもひでぽろぽろ大問題!IEで見たらfillってるぢゃないか!!IE11の寿命おさらい1年半も待てない!IE対策してくれるJSファイル忘れちゃならねぇCSS追記でIE対策完了!object-fitとは何ぞやたとえばこんな記事一覧があったとする。CodePen.この左側の画像に、object-fitを使っています。ここでやっているのは「外接リサイズ」です。記事一覧に配置したのはこんな画像。※正方形タイプサムネイルと同じ正方形。みんなこの比率ならまことに喜ばしい限り。恐悦至極に存じ上げ奉りたい。※横長タイプでも実際の運営上は、このような横長画像もあれば...※縦長タイプうわデカ!そう、縦長画像もありますわな。これを毎回フォトショップなどのグラフィックソフトで正方形にトリミングしてもいいのだが、Webサイト完成後の更新をクライアントに引き継ぐ場合は、毎回それをしてもらうのは負担になるわけです。CSSで自動的にトリミングしたい。それをかなえてくれるのが、そう。fit...fit..)←ディレイobject-fitのコードでは、実際のコードを見ていきましよう。object-fitというのはCSSです。クモのようにコツコツとCSSスタイルを当てる対象のHTMLはこんな感じ。</li></ul>ulリスト(.of)の中にimg画像とpタイトル(.title)があり、それぞれをaリンクで囲っている。object-fitを設定しているのはimgです。cover;}幅width、高さheightはそれぞれ100pxの正方形で、その下にobject-fitプロパティがあり、値はcoverです。cover(外接リサイズ)coverは外接リサイズ。外接リサイズとは、画像の短辺側がいっぱいになるようにリサイズすることで、見た目上は正方形枠のなかに隙間がなくなります。CodePen.※contain(内接リサイズ)containは内接リサイズ。内接リサイズは、画像の長辺側がいっぱいになるようにリサイズすることで、見た目上は正方形枠のなかに隙間ができるが画像はトリミングされず、すべて表示される。CodePen.外接リサイズと内接リサイズ、どっちがいいかってのはケース・バイ・ケースでしょうな。※fill(縦横比無視!)これははっきり言って使い道はないんだけど、画面いっぱいになるように縦横比を無視してリサイズする設定。これがなんとobject-fitの初期値!つまり、object-fitを何も設定しないとこの状態になるわけだ。CodePen.この初期値から長辺側いっぱいにする?短辺側いっぱいにする?と選択肢を拡げてくれるのがobject-fitってわけです。object-fit前のおもひでぽろぽろobject-fitが登場するまでは、画像を中央配置してリサイズするのは大変な手間でした。positionを駆使したりね...。TAMそれがobject-fitたった1行で済むのはまさに感謝感激感動感涙モノなわけです!はい。大問題!IEで見たらfillってるぢゃないか!!と、ここまで見て、ほうほうこれは便利だ、と感じてくれたそこのあなた!あなたが見ているブラウザはズバリ、IEではないでしょう。え?なんでわかったかって?はい。etcIE11の寿命おさらい何度かご紹介しているがWindows7はEdge非対応。デフォルトブラウザはIE11。ライトユーザーはこれを使う。@ITIE11の寿命は最低でもWindows7のサポートが終わる2020年1月までは続くと予想されます。atLifeIE11のシェア23%!おちこんだりもしたけれど、IEはげんきです。ソフトウェアテスト・第三者検証ならウェブレッジ1年半も待てない!IE対策してくれるJSファイル1年半も待てないよ!!(涙)大丈夫。考えよう、答えはある。...しかしながら、このofi.jsというファイルをあと1年半のためだけにアップロードするのもなんだかなぁという気持ちがある。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です。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に。CodePen.※IE対策後の内接リサイズ(contain)containならfont-familyの値をcontainという具合に。CodePen.ということで、あと1年半はこのCDNで乗り切りませう!!!ありがたやありがたや。APIの続きになります。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。