大阪/梅田のホームページ制作会社 ウェブラボ関西オフィス

スタッフブログ

【CSS/JS】object-fitプロパティで画像をトリミングしよう

2020/10/6 技術Memo
【CSS/JS】object-fitプロパティで画像をトリミングしよう

ページに画像を挿入した時に、画像のサイズがまばらになるのが気になったことはありませんか?
とはいっても、1枚ずつ画像をトリミングしてアップし直すのも面倒ですよね。
CSSを使えば、画像をトリミングした状態で表示することが可能です。画像そのものを切り取る必要はありません。
今回は、CSSを使った画像のトリミング方法を紹介します。

object-fitプロパティ

CSSで画像をトリミングするには、object-fitプロパティを使用します。
img要素だけでなく、video要素などにも使用可能です。
値は5種類あります。順番に見ていきましょう。
今回使用するのは幅400px、高さ300pxの以下の画像です。

SAMPLE

サンプル写真

値:fill

SAMPLE

サンプル写真

img {
  width: 180px;
  height: 180px;
  object-fit: fill;
}

初期値です。トリミングは行われず、縦横がボックスサイズに合わせた形で画像が表示されます。
そのため、元画像と異なるwidthとheightを設定した場合は、引き延ばされた形になってしまいます。

値:contain

SAMPLE

サンプル写真

img {
  width: 180px;
  height: 180px;
  object-fit: contain;
}

トリミングは行われませんが、縦横比を維持したままボックスサイズに合わせて画像が拡大・縮小表示されます。
横長のボックス画像の場合は幅に合わせて拡大・縮小、縦長のボックスの場合は高さに合わせて拡大・縮小が行われるイメージです。

値:cover

SAMPLE

サンプル写真

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

ボックスサイズに合わせて画像が拡大・縮小されます。
さらに、ボックスサイズに合わせてトリミングされるため、余白ができません。
これがcontainとの違いです。
例の画像の場合、まず高さに合わせて画像が縮小された後、幅がトリミングされています。

値:none

SAMPLE

サンプル写真

img {
  width: 180px;
  height: 180px;
  object-fit: none;
}

画像は拡大・縮小されません。
そのうえで、ボックスサイズに合わせてトリミングされます。

値:scale-down

SAMPLE

サンプル写真

img {
  width: 180px;
  height: 180px;
  object-fit: scale-down;
}

noneかcontainのいずれかの指定が採用されます。
ボックスサイズより画像が大きい場合はcontain、小さい場合はnoneが採用されます。
例の場合はボックスサイズより画像が大きいため、containと同じ表示になっています。

object-positionプロパティ

トリミングする画像の位置を任意で指定することができます。
object-position: 横の位置 縦の位置;

初期値(指定なし)の場合は中央になります。
値は%や、pxなど単位を付けた数値、left、topといったキーワードも使用できます。

中央でトリミング(初期値)

SAMPLE

サンプル写真

img {
  width: 180px;
  height: 180px;
  object-fit: none;
  object-position: 50% 50%;
}

左上でトリミング

SAMPLE

サンプル写真

img {
  width: 180px;
  height: 180px;
  object-fit: none;
  object-position: 0 0;
}

左下でトリミング

SAMPLE

サンプル写真

img {
  width: 180px;
  height: 180px;
  object-fit: none;
  object-position: 0 100%;
}

右上でトリミング

SAMPLE

サンプル写真

img {
  width: 180px;
  height: 180px;
  object-fit: none;
  object-position: 100% 0;
}

右下でトリミング

SAMPLE

サンプル写真

img {
  width: 180px;
  height: 180px;
  object-fit: none;
  object-position: 100% 100%;
}

IEでの実装について

便利なobject-fitプロパティですが、残念ながらIEでは対応していません。
IEでも対応させたいという時に便利なjsライブラリ「object-fit-images」をご紹介します。

①ダウンロードする

GitHubからjsをダウンロードします。
「Code」と書かれた緑のボタンから、zipをダウンロードできます。
展開したフォルダから、distフォルダを開くと「ofi.js」と「ofi.min.js」が格納されています。
いずれも内容は同じですが、minのほうが軽量版になります。任意のファイルを使用してください。
今回は「ofi.min.js」を使用します。

②jsを読み込む

bodyの閉じタグ直前にscriptタグを記述して、格納場所からファイルを読み込みます。

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

③トリミングしたい画像のimgタグにクラスを追加する

クラス名は任意ですが、④でCSSを読み込むために使用します。

<img class="object_fit" src="img_dog.jpg">

④CSSを追加する

③で指定したクラス名で、トリミング処理を追加します。
「object-fit-images」を使用するには、font-familyプロパティを指定します。
object-fitだけでなく、object-positionも指定できます。

.object_fit {
  /*トリミング処理*/
  object-fit: cover;
  object-position: bottom;
  /*IE用トリミング処理*/
  font-family: 'object-fit: cover; object-position: bottom;';
}

⑤スクリプトを実行する

②でjsを読み込んだ記述より後に、以下の記述を追加してスクリプトを実行します。

<script>objectFitImages();</script>

これで、IEでもそれ以外のブラウザと同じようにトリミングすることができます。

まとめ

画像の切り取りが不要になるので、ブログなど投稿タイプのページで特に重宝するプロパティです。
IEの制約もありますが上記の方法で対応できますので、活用してみてください。

ホームページ制作実績

大阪/梅田を拠点に、京都・奈良・滋賀・兵庫など関西圏はもちろん、 日本全国、さまざまな業種のお客様のホームページを制作しています。

制作実績一覧はこちらから

私たちについて

私たちはお客様の会社のホームページ担当として、 以下のポリシーをもってホームページ制作を行います。

少数精鋭。常に最高のチーム体制で制作します

少数精鋭。
常に最高のチーム体制で制作します

100人のお客様に100通りのプランをご提案します

100人のお客様に
100通りのプランをご提案します

常に正直に、誠実に。きちんとNOとお伝えします

常に正直に、誠実に。
きちんとNOとお伝えします

お客様の「お客様」の視点を大事にします

お客様の「お客様」の
視点を大事にします

格好いい、キレイなだけのデザインはしません

格好いい、キレイなだけの
デザインはしません

「+1」のクリエイティブにとことんこだわります

「+1」のクリエイティブに
とことんこだわります

詳しくはこちらから

スタッフブログ TOP