オブジェクトフィット

オブジェクトフィットユーティリティを使用して、<img> や <video> などの置換要素のコンテンツがコンテナに合わせてどのようにサイズ変更されるかを変更します。

このページの内容

仕組み

レスポンシブな `object-fit` ユーティリティクラスを使用して、`object-fit` プロパティの値を変更します。このプロパティは、アスペクト比を維持したり、可能な限り多くのスペースを占めるようにストレッチしたりするなど、さまざまな方法で親コンテナを埋めるようにコンテンツに指示します。

object-fit の値のクラスは、.object-fit-{value} の形式で名前が付けられます。次の値から選択します

contain
cover
fill
scale (縮小用)
none

例

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

html

<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="...">

レスポンシブ

各 `object-fit` 値には、`sm`、`md`、`lg`、`xl`、`xxl` のブレークポイントの省略形を使用して、 `。object-fit-{breakpoint}-{value}` の形式のレスポンシブバリエーションも存在します。必要に応じて、さまざまな効果を得るためにクラスを組み合わせることができます。

html

<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="...">

ビデオ

.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>

CSS

SassユーティリティAPI

オブジェクトフィットユーティリティは、`scss/_utilities.scss` のユーティリティAPIで宣言されています。ユーティリティAPIの使用方法をご覧ください。

scss/_utilities.scss

"object-fit": (
  responsive: true,
  property: object-fit,
  values: (
    contain: contain,
    cover: cover,
    fill: fill,
    scale: scale-down,
    none: none,
  )
),