CSSで画像をトリミングするためにobject-fitを使ってたら痛い目を見ました

久しぶりにHTMLコーディングをすることがありました。

大きい画像をCSSでトリミングして良い感じに表示したいなと思い、object-fit: cover; を使って良い感じに表示できてすごく便利になったものだなと感心してました。

で、あとから画像の比率がおかしいと指摘があり、ChromeやSafari・Firefoxで見ても崩れてないからキャッシュの仕業かなと思ってたんですが違いました。

ええ、コイツです。

f:id:ryskit:20190923231519p:plain

object-fit って便利なんですけど、IEが対応してくれてないのが残念だ。。。。

と思ってたら、JSでなんとか対応してくれるライブラリがありました。

object-fit-images ライブラリ

github.com

1. CSSを記述する

使い方は簡単で、ChromeやSafari・Firefoxはobject-fitを使えるので、その部分のCSSだけ外出しして以下のようにCSSを書いておきます。

.object-fit-img {
    object-fit: cover;
    font-family: 'object-fit: cover;';
}

大事なのは、 font-family: 'object-fit: cover;'; と記述している部分。 ここに書いているものがIEで適用されるので、ここを書き忘れるとIEでobject-fitが動きません。

これを書き忘れて、IEでも動かねーじゃねーかとハマってしまいました。。。ごめんなさい。

2. ofi.min.js ファイルを読み込む&有効にする

object-fit-images をダウンロードすると、 dist ディレクトリの下に、 ofi.min.js が入っているのでそれをheadタグ内で読み込めるように設定してください。

その後、JSファイルやスクリプトタグの中で、以下のように記述してください。

objectFitImages('img.object-fit-img');

これがないと、IEで有効にならないので注意。 img.object-fit-img は class名:  object-fit-img が付けられたimgタグに対して有効にするとしています。 ここはよしなに変更してください。

3. object-fitを使いたいimgタグにクラス名を付ける

1.で記述したクラス名をimgタグのクラス名に追加してください。 これでIEでもobject-fitが使えるようになります!

<img class="object-fit-img" src="...">

最後に

Web制作って久しぶりにやると楽しいけど、各ブラウザへの対応とかどこまで保証するかとか大変だなと思いました。

個人的にサーバー書いてるほうが楽しいな!