我々は何年待ったのか?このお手軽外接リサイズobject-fit
の登場を!なのにIE11非対応って哀しすぎる。またしてもこの余生ブラウザにもどかしい思いを味わっているのだ。
Edge非対応OS、Windows7のサポート終了まで約1年半(2020年1月終了!)。だが、大丈夫。手はあるんです!
目次:
- object-fitとは何ぞや
- 配置した画像
- object-fitのコード
- いろいろなobject-fit
- object-fit前のおもひでぽろぽろ
- 大問題!IEで見たらfillってるぢゃないか!!
- IE11の寿命おさらい
- 1年半も待てない!IE対策してくれるJSファイル
- 忘れちゃならねぇCSS追記でIE対策完了!
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
が適用されます!
しかしながら、この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