BLOG

ブログ

programming

画像を1枚ずつトリミング…CSS一行で解決できます！

こんにちは、ティウェブ佐藤です。

object-fitプロパティ、使ってますか？

object-fitプロパティは、background-sizeプロパティのcoverやcontainの代わりにもなるプロパティです。

そんな便利なobject-fitプロパティについて詳しく調べてみました。

目次

「object-fit」プロパティとは…

画像などの要素をボックスにフィットさせる方法を指定できるプロパティです。

background-sizeプロパティだと背景処理になり、imgタグで処理したいときに対応できません。

しかし、今回紹介するobject-fitプロパティはimgタグとして扱うことができ、縦横比を保ちつつbackground-sizeプロパティに似た処理が可能になります。

メリットやデメリット

メリット

  • よりシンプルなコーディングができる
  • トリミングができるため画像をリサイズする手間が省ける
  • スマホとPCの切り替えが楽になり、場面ごとに画像のトリミング調整をしなくてもよい
  • imgタグならalt属性に画像情報を記載できるため、アクセシビリティの面でも画像検索対応の面でも好ましい

デメリット

  • IE、Edgeに対応させるにはjQueryが必要（実装工程は少なめ）

「object-fit」プロパティの値は5つ！

<img src="dog.jpg" alt="可愛いワンちゃんの正面写真">

こちらの可愛いワンちゃんの画像を使ってみます。

値：fill

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

オブジェクトが縦横比を変えながら完全にボックスの中を満たしリサイズされます。

値：contain

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

幅と高さの大きい方が基準になり縦横比を維持したまま、ボックスに収まるようにリサイズされます。

値：cover

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

幅と高さの小さい方が基準になり縦横比を維持したまま、ボックスを満たすようにリサイズされ、はみ出す部分はトリミングされます。

値：none

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

リサイズされずにそのままのサイズで表示されます。

値：scale-down

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

none又は containの、オブジェクトの実際のサイズが小さいほうを採用します。

トリミング位置も1行で決められます！

img {
  width: 400px;
  height: 185px;
  object-fit:none;
  object-position:0 100%; /*左下を基点にトリミングされます*/
}

object-position:値;でトリミングの位置を決められます。

background-sizeプロパティの値によって表示される画像の位置の初期値はobject-position: 50% 50%;なります。
この位置を調整したい場合は、object-positionプロパティの値を調節します。

IEやEdgeに対応させるには？

プラグインの「object-fit-images」の導入でobject-fitプロパティが対応可能になります。
別ファイルが必要になりますが、CDNもあるので導入がしやすいです。

Github：object-fit-images

導入方法

  1. 1.CDNを読み込み
  2. 2.スクリプトを呼び出します
  3. 3.CSSでobject-fitプロパティを記述 
    img{
  object-fit: contain;
  font-family: 'object-fit: contain;' /*IEやEdgeに対応させる特別な記述*/
}

font-family: 'object-fit:値;がobject-fitプロパティと同じ意味を持つ特別な記述であり、IE・Edge対策になります。

まとめ

コーディングもシンプルになることだけでなく、positionを駆使したり、Photoshopを使ってすべての画像をトリミングする手間が省けそうです。

特に、画像をレスポンシブ対応させたいときや、サイズの違う大量の写真を並べるときに便利でしょう。

シンプルに手間を少なくしたい方は、object-fitプロパティをぜひ導入してみてください。

CATEGORY