コラム

こんにちは　ホネ吉です。今回はコーディングを行う上で便利なJSをご紹介します。
WordpressなどのCMSで記事にアイキャッチを設定する場合、システム構築者は縦長、横長などどんな画像にも対応できるようにコーディングする必要があります。
「object-fit」プロパティは画像を中央位置でトリミングしたり、画像を指定の枠内に縦横比を維持したまま納めたりと便利なプロパティなのですが、残念なことにIE/Edgeに対応していません。

今回紹介する「object fit images」は導入することでIE・Edgeでも「object fit」プロパティを使用可能になるとても有難いプラグインです。

導入方法

1.ファイルの読み込み

Github
上記のGithubからobject-fit-imagesのファイルをダウンロードします。(ファイルパス：dist/ofi.min.js)
ダウンロードしたらHTMLで読み込みます。

<scrpt src="js/ofi.min.js"></script>

2.HTMLで画像を設置

HTML上でimgタグを用い画像を設置します。CSSやスクリプトの呼び出しをしやすいようにクラス名を指定しておくといいでしょう。

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

3.CSSでobject-fitを記述

設置した画像に対してCSSでobject-fitの記述をします。ここでIE・Edgeに対応させるために「object-fit-image」の特別な記述を追加します。

.object-fit{
  object-fit: contain;
  font-family: 'object-fit: contain;'
}

4.スクリプトを呼び出し・実行

スクリプトを実行・呼び出します。

<script>
  objectFitImages('img.object-fit-img');
</script>

デモ

• 通常
  
• object-fit:contain
  
• object-fit:cover
  

まとめ

いかがだったでしょうか？
私も最近のコーディングでは記事一覧のページ時などによく導入していますが、IE・Edgeを気にせず「object-fit」と使えるので便利です。
是非一度お試しください。