IE11でもobject-fitを使う一番簡単な方法
CSSのobject-fitプロパティって便利ですよねぇ。
画像を並べるページではもうほとんどコレに頼り切りで、このプロパティがないなんて考えられないくらいです。
がしかし、この便利なobject-fitさん、IE11は対応してないんですよね…。
そもそもobject-fitって何？
例えば、下記のような縦長写真と横長写真が混在する場合、普通に並べるとこんなふうにデコボコになりますよね。
幅200pxで揃えたら上下にデコボコになりますし、
高さ200pxで揃えると大きさが不揃いになりますし、
幅200px 高さ200pxを指定すると被写体が歪んでしまいます。
左のワンちゃんは潰れていますし、右のワンちゃんは細長くなっちゃいましたよね？
これを解決してくれるのが object-fit:cover; です。
こんなふうに指定した範囲内で画像をトリミングして表示してくれるんですね。
■object-fitの使用例
<style>
img {
width:200px;
height:200px;
object-fit:cover;
}
</style>
そして、もし上述の写真であいかわらず被写体がつぶれたままだとしたら……あなたのブラウザはIEです(；´Д｀)
IEではobject-fitが効かない
Chrome、Safari、FireFox、Operaはobject-fitをサポートしていますが、IEだけはサポートしていないのです。
■IEでの表示例
これでは困る…。
IEなんてあと数年でサポート終了するのだから無視してしまえばいいなんていう意見も聞きますが、うちが運営しているサイトの中にはIEの使用率が20％を超えているところもあるので、無視できない人数になります。
IEでobject-fitに対応する方法
ざっと調べた限り、IEでobject-fitに対応するには3種類の方法があります。
- IEでも他のブラウザでも使えるCSSに置き換える
- GitHubで公開されているJavaScript、object-fit-imagesを使う
- GitHubで公開されているJavaScript、fitieを使う
まず1番は却下です。
要件によっては選ばないこともない選択肢ですが、既に寿命が決まっているブラウザ(IE)のために他のブラウザが影響を受けるというのはよくありません。できればIE以外のブラウザではそのままobject-fitを使いたいです。
そうなると次に「IE object-fit」などで検索するとよく紹介されている object-fit-images (ofi.js) が候補に挙がるのですが、こちらもちょっと悩ましいです。
というのも、object-fit-imagesを使うためには
- ofi.jsの読み込み
- CSSの書き換え（font-family: 'object-fit: cover;';を追記）
- objectFitImages();関数の起動
という3つの手順が必要なんです。
いえね、たったコレだけでにっくきIE対策ができるのだから十分ありがたいのですが、もっと簡単な手段があるのならそちらのほうが良いと思いませんか。
それが最後の fitie.js です。
fitie.jsの使い方
- fitie.jsをDLする
- fitie.jsを読み込む
以上です。
いや、ほんと
<script src="fitie.js"></script>と書くだけでIEでobject-fitが効くようになります。
Before)
After)
素晴らしすぎる…。
fitie.jsを作った方には足を向けて寝られません。
ありがたやありがたや(´；ω；｀)
