オブジェクトフィット Object fit

object fitユーティリティを使用して、<img>や<video>などの置換要素のコンテンツがcontainerに合わせてどのようにサイズ変更されるかを変更します。

On this page

動作原理

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

object-fitの値のクラスは、.object-fit-{value}の形式で命名されています。次の値から選択します。

contain
cover
fill
scale（scale-downの場合）
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値のレスポンシブバリエーションも、次のブレークポイント省略形の.object-fit-{breakpoint}-{value}の形式で存在します：sm、md、lg、xl、xxl。クラスは、必要に応じてさまざまな効果のために組み合わせることができます。

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

Object fitユーティリティは、scss/_utilities.scssのutilities APIで宣言されています。utilities APIの使用方法を学びます。

scss/_utilities.scss

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