オブジェクトフィット

Object fit

オブジェクトフィットユーティリティを使って、<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-{breakpoint}-{value}という書式を使用した各object-fit値に対して、以下のブレイクポイント略号に対するレスポンシブバリエーションも存在します :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="...">

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>

CSS

SassユーティリティAPI

オブジェクトフィットユーティリティはユーティリティAPIのscss/_utilities.scssで宣言されています。ユーティリティAPIの使い方はこちら

scss/_utilities.scss

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