CSSで画像を縦・横フィット！「object-fit: cover」で自動トリミング｜IE対応！

枠の中に画像を縦横ピッタリと収めたい時、横幅１００％か、縦幅１００％かを指定するけど、画面サイズによって縦か横の余白が空いちゃうから、メディアクエリで細かい指定しなくちゃいけなかったり色々手間が多いよね。

「object-fit: cover」なら、その面倒から解放されて画面サイズを変えても、イイ感じに両方フィットしてくれる。

言葉では分かりずらいのでデモで確認してみよう！

デモ

デモでは、横300px、縦300pxに収まるようにイイ感じになるね！
CSSは下記になります。

CSS

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

CSSはimgに表示する縦横の「px」と「object-fit: cover」を指定したら完成！
画像比率がおかしくならずに、「overflow: hidden」も要らない。
でもピッタリと比率もちゃんとしててさらにトリミングもされてる！

超絶便利♪

自分は今まで知らなかったので、みんなも使う機会が有ったら一緒に使おう！
ちなみにブラウザの対応状況はこんな感じです。
IE以外の全ブラウザ対応なので使いやすい。
IEはもういいかもだけど場合によっては、まだまだ現役かもしれません。
なので、プラグインでIEでの表示もカバーしよう！

IEをカバーするプラグイン「object-fit-images」

GithubからプラグインをダウンロードするかCDNでリンクしてください！

HTMLにリンクを追加

  // ダウンロード
  <script src="/js/ofi.min.js"></script>
  // CDN
  <script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.min.js"></script>

プラグインの「object-fit-images」を利用するためにダウンロードまたは、CDNからのリンクのどちらかをHTMLに書こう。
そしたらjsでimgの処理をします。

jsファイルに記述を追加

  objectFitImages();

これだけでもいいんだけど、このままだと全ての画像に「object-fit-images」のプラグインを利用することになり処理が重たくなっちゃうから、「object-fit」を使う特定画像だけを指定する場合は次の書き方になります。

  objectFitImages('.first-img');

これで「.first-img」だけを処理することができます。
最後にCSSで特定の指定をしたら完了です。

CSSで記述

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

これでIEでも「object-fit: cover」が利用できるようになりました！
IEだけの為にってちょっと面倒だけどしょうがない場合もあります！

以上です。