「object-fit: cover;」をIEでも使う方法

, ,

18 views

objectプロパティ、便利ですよね!
わざわざPhotoshopなどで開いてトリミングしなくても、
枠内に綺麗に収まってしまいます。
自分もよく使います。

しかし、残念ながらIEでは効かないのです。
憎たらしきIE!

そこで紹介するのがIEでも使えるようになるjQueryです。
その名も「object-fit-images」!

ダウンロード

まずは、こちらのサイトからjQueryをダウンロードしましょう。
ダウンロードし終わったら、object-fit-images-master/dist/の中に
ofi.min.jsがあるので自分のフォルダに移動させます。

HTML側の設定

下記をタグの直前に設置します。

次はスクリプトの実行です。

上記だと全ての画像に効きますので、特定の画像だけに効かせたいならば、

CSS側の設定

最後にCSS側の設定です。
1行追加するだけなので簡単です。

これでobject-fitをIEやEdgeにも効かせることができるはずです。
みなさんも是非使ってみましょう!