メインコンテンツにスキップ ドキュメントナビゲーションにスキップ

オブジェクト・フィット（Object fit） v5.3.0新設

オブジェクト・フィットユーティリティは、<img> や <video> のような置換要素の内容を、そのコンテナに合うようにサイズ変更するために使用。

※"v5.3.0"での変更はv5.3.0-alpha版での変更も含みます。
このページの項目 v5.3.0新設
※参考

使い方（How it works）

レスポンシブ object-fit ユーティリティクラスで、object-fitプロパティの値を変更する。このプロパティは、アスペクト比を維持したり、できるだけ多くのスペースを取るために引き伸ばすなど、さまざまな方法で親コンテナを埋めるようにコンテンツに指示する。

object-fit の値を表すクラスは、.object-fit-{value} のフォーマットで命名され、以下の値から選択する。

  • contain（object-fit: contain）
  • cover（object-fit: cover）
  • fill（object-fit: fill）
  • scale（スケールダウン用、object-fit: scale-down）
  • none（object-fit: none）

実例（Examples）

置換要素に object-fit-{value} クラスを追加。

プロバティの種類
Placeholder : Object fit containアスペクト比を維持して切り抜かずにリサイズ：.object-fit-contain
 Placeholder : Object fit coverアスペクト比を維持したままトリミングしてコンテナ全体を埋める：.object-fit-cover
 Placeholder : Object fit fillアスペクト比を無視してコンテナ全体を埋める：.object-fit-fill
 Placeholder : Object fit scale downコンテナより画像が大きい場合は contain を、小さい場合は none を指定：.object-fit-scale
 Placeholder : Object fit noneリサイズなし：.object-fit-none
設定例
アスペクト比を維持してリサイズ<img src="..." class="object-fit-contain border rounded" alt="...">
トリミングしてコンテナ全体を埋める<img src="..." class="object-fit-cover border rounded" alt="...">
アスペクト比を無視してコンテナ全体を埋める（デフォルトの動作）<img src="..." class="object-fit-fill border rounded" alt="...">
スケールダウン<img src="..." class="object-fit-scale border rounded" alt="...">
リサイズなし<img src="..." class="object-fit-none border rounded" alt="...">
【設定】
  • <img> に .object-fit-{value}（上記の「プロバティの種類」から選択） を入れる

レスポンシブ（Responsive）

また、.object-fit-{breakpoint}-{value} のフォーマットで、ブレイクポイントの略語である sm, md, lg, xl, xxl に対応したレスポンシブバリエーションがある。クラスは必要に応じて組み合わせることで、様々な効果を得ることができる。

見本
Placeholder : Contain on sm Placeholder : Contain on md Placeholder : Contain on lg Placeholder : Contain on xl Placeholder : Contain on xxl
設定例
ビューポートが小以上でリサイズ<img src="..." class="object-fit-sm-contain border rounded" alt="...">
ビューポートが中以上でリサイズ<img src="..." class="object-fit-md-contain border rounded" alt="...">
ビューポートが大以上でリサイズ<img src="..." class="object-fit-lg-contain border rounded" alt="...">
ビューポートが特大以上でリサイズ<img src="..." class="object-fit-xl-contain border rounded" alt="...">
ビューポートが超特大以上でリサイズ<img src="..." class="object-fit-xxl-contain border rounded" alt="...">
定義済クラスの種類
ビューポートサイズ 全て
≥0px		 小以上
≥576px		 中以上
≥768px		 大以上
≥992px		 特大以上
≥1200px		 超特大以上
≥1400px
アスペクト比を維持して
リサイズ		 .object-fit-contain .object-fit-sm-contain .object-fit-md-contain .object-fit-lg-contain .object-fit-xl-contain .object-fit-xxl-contain
トリミングしてコンテナ全体 .object-fit-cover .object-fit-sm-cover .object-fit-md-cover .object-fit-lg-cover .object-fit-xl-cover .object-fit-xxl-cover
アスペクト比を無視して
コンテナ全体		 .object-fit-fill .object-fit-sm-fill .object-fit-md-fill .object-fit-lg-fill .object-fit-xl-fill .object-fit-xxl-fill
スケールダウン .object-fit-scale .object-fit-sm-scale .object-fit-md-scale .object-fit-lg-scale .object-fit-xl-scale .object-fit-xxl-scale
リサイズなし .object-fit-none .object-fit-sm-none .object-fit-md-none .object-fit-lg-none .object-fit-xl-none .object-fit-xxl-none
【設定】
  • <img> に .object-fit-{breakpoint}-{value}（上記の「定義済クラスの種類」から選択）を入れる

ビデオ（Video）

.object-fit-{value} とレスポンシブ .object-fit-{breakpoint}-{value} ユーティリティは、<video> 要素でも機能。

設定例
アスペクト比を維持してリサイズ<video src="..." class="object-fit-contain" autoplay></video>
トリミングしてコンテナ全体を埋める<video src="..." class="object-fit-cover" autoplay></video>
アスペクト比を無視してコンテナ全体を埋める（デフォルトの動作）<video src="..." class="object-fit-fill" autoplay></video>
スケールダウン<video src="..." class="object-fit-scale" autoplay></video>
リサイズなし<video src="..." class="object-fit-none" autoplay></video>
【設定】
  • <video> に .object-fit-{breakpoint}-{value}（上記の「定義済クラスの種類」から選択）を入れることも可能

CSS

SassユーティリティAPI（Sass utilities API）

オブジェクト・フィットユーティリティは、scss/_utilities.scss のユーティリティAPIで宣言されている。ユーティリティAPIの使用方法はこちらに掲載。

デフォルトの設定
scss/_variables.scss 内 utils-object-fit の設定"object-fit": (
  responsive: true,
  property: object-fit,
  values: (
    contain: contain,
    cover: cover,
    fill: fill,
    scale: scale-down,
    none: none,
  )
),