小金井にあるWEB制作会社の備忘録

MEMORANDUM

CSS「object-fit」を使って画像を表示枠に合わせてトリミング

  • 公開日：2020-05-09
  • 最終更新日：2021-01-25

画像を表示枠いっぱいに表示する場合に、背景画像や「position」等で対応していたけど、「img」タグに一行追加するだけで縦横比を変えずに簡単に実装できる方法があったのでメモ。

CSS

img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

上記の「object-fit」プロパティーを指定の「img」に追加するだけ。
幅と高さは親要素で設定していない場合は指定する。

「object-fit」プロパティーで使える値

値説明
fill（初期値）表示枠内を満たすように縦横比を変えながらリサイズ。
cover縦横比を保持して表示枠いっぱいにリサイズ。
縦横のうち小さい方を基準にして自動的にリサイズし、表示枠からはみ出した部分はトリミングされる。
contain縦横比を保持し、表示枠に収まるようにリサイズ。
幅と高さのうち大きい方のサイズに合わせて比率を保持して表示枠にフィット。（不足部分は余白が発生）
noneリサイズせず、そのまま表示。
scale-downnone と contain のうち、小さい方のサイズに合わせて表示。

上記の設定の場合の場合、画像はデフォルトで中央に配置されます。
画像の中でフォーカスしたいポイントが中央にある場合にはよいですが、そうでない場合は「object-position」を使用します。
初期値は、object-position: 50% 50% でセンター配置。
0% 0%は左上、0% 100%は左下、100% 0%は右下、100% 100%は右下配置となります。

CSS

object-position: 左位置 上位置;
img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: 0px 0px;
}

IEにobject-fitを対応させる方法

便利な「object-fit」ですが、IEには対応していません。
既に公式でのサポートもなくなり、対応が不要なところも多い中、一部の企業では対応が求められることもあるので、対応方法を記載。

ofi.min.jsの読み込み

GitHubで公開されている「object-fit-images」をダウンロードし、HTMLのhead内に「ofi.min.js」を読み込みます。
ダウンロードが面倒な場合はCDNの用意もあります。

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/object-fit-images/3.2.4/ofi.js"></script>

スクリプトの実行を行う

object-fitを使いたいページで関数を呼び出し、実行します。

jOuery

$(function(){
	objectFitImages();
});

IE用のCSSを追記

CSSファイルで、object-fitを使用したいセレクターに「font-family: ‘object-fit: 属性値;’; 」を追記する。

CSS

object-fit: cover;
font-family: 'object-fit: cover;'; /*IE対策*/

object-fit: contain;
font-family: 'object-fit: contain;'; /*IE対策*/

同一カテゴリーの記事