background-size:cover;をimgタグでも実現する方法

みなさま、こんにちは！
ディレクション・デザイン・コーディングなどWEB制作業務を色々やってます竹下です！
あまり文章を書くことがないので、みなさまのお目汚しになるかもしれませんが、がんばって書いていきます！

さて、今日はコーディングのお話です。
IEのバージョンが11を対象にすることが案件でも多くなり、
CSS3を使用する機会も多くなってきました。

その中でもレスポンシブコーディングでも重宝する【background-size:cover】は皆様もよく使用されているのではないでしょうか？
指定した要素いっぱいに背景画像が広がり、可変しても自動的に描画してくれる便利なcssです。

げっ！【background-size:cover】 使いたいけど…

しかし、デザインによっては、画像を設置する箇所の中身にタイトルや文章などの要素がないけど、どうしても【background-size:cover】を使いたい時ってありませんか？

はい、時々やっている方をお見かけします。

でたっ　必殺！空のdiv！!

ダメなのは分かってはいるけど、しかたなく使ってしまうことはありますよね…
そんな時、実は便利なCSS3があったのです！？

僕らの救世主【object-fit: cover】

そんな時は、【object-fit: cover】という便利なcssがあるのです！

使い方

【object-fit: cover】はHTMLにimgタグで画像を設置し、cssはimgタグに指定をして使用します。
【object-fit: cover】を使う時は、画像に横幅と高さをつけましょう。
【background-size:cover】と同じような表現したい時は、width100%とheight100%の指定をします。
指定も簡単なので、素敵です！

だが、いつものアレが立ちふさがるのです…！！

とても便利な【object-fit: cover】ですが、ひとつ問題があります。
そう、あのIEさんが非対応なのです…

しかし、こちらは先駆者のお力を借りて解決できます！

jQueryプラグイン「object-fit-images」

こちらのページからファイルをダウンロードします。
「Clone or download」の緑のボタンからzipをダウンロードして
distのディレクトリ内にあるofi.min.jsのみ使用します。

Jqueryとofi.min.js読み込み、設定の記述を追記します。
また、cssにて【font-family: ‘object-fit: cover;’;】を追加します。

設定はこれだけです！

それでは、デモを見てみましょう。

DEMO

IEでも綺麗に表示されているかと思います。

いかがでしたでしょうか？
「object-fit-images」はIE9・IE10・IE11にて、使用できますので、
シーンによっては、とても便利なJS・CSSなので、積極的に使用していきたいです！

ご覧いただき、ありがとうございました。