object-fitがIE11で効かない | ホームページ制作部ブログ「横着は敵」

object-fit:cover;がIE11で効かない場合の対処法です。手順としましては、

たったこれだけです。

たったこれだけですけど、object-fit:cover;を使いたいそれだけのためにわざわざ面倒ですねぇ、IE11。もうInternet Explorer 11なんてゴミ箱にポイー！ってしたいですが、前回の投稿で役に立ってしまったので、そこまで言い切ることもできず、もどかしい毎日です。

そもそも、IE11を使用していない方には、何のことかさっぱり分からないと思いますが、まずobject-fit:cover;の簡単な説明から始めますと、たとえば下のような横長の画像を、正方形にトリミングしてホームページに貼りたいとして、

いちいちphotoshopなどで加工してアップしてというのが面倒なときに、

img {
	object-fit: cover;
	width: 300px;
	height: 300px;
}

このようにimgに対してスタイルを指定すれば、下の画像のように画像の短い方の辺が300pxピッタリになるように、長い方の辺をトリミングをしてくれるという、超絶便利なcssです。

ところがですが、IE11くんはバカなので、下の画像のようにアスペクト比を無視して300px内に画像のすべてを入れようとしてしまいます。

君はほんとにバカだな、IE11くん。

なので、これを対処しないといけないので、その方法です。

まず最初に、ofi.min.jsをheadで読み込みます。ofi.min.jsは、https://github.com/bfred-it/object-fit-imagesここからダウンロードしてください。

次に、objectFitImages();を実行させます。外部のjsファイルに書いて、head内で読み込ませてもいいし、直接ページにscriptタグを置いて書いてもどちらでも構いません。

最後に、対象のimgタグに対してcssで、font-family:"object-fit:cover;";を足します。

したがって、最終的なcssのコードはこのようになります。

img {
	object-fit: cover;
	width: 300px;
	height: 300px;
	font-family: "object-fit:cover;";
}