オブジェクトフィット

置き換えられた要素のコンテンツのサイズ変更方法を制御するためのユーティリティ。

Class reference

Class
Properties
.object-containobject-fit: contain;
.object-coverobject-fit: cover;
.object-fillobject-fit: fill;
.object-noneobject-fit: none;
.object-scale-downobject-fit: scale-down;

Contain

.object-containを使用して、要素のコンテンツのサイズを変更し、コンテナ内に含まれたままにします。

.object-contain

<div class="bg-gray-400">
  <img class="object-contain h-48 w-full ...">
</div>

Cover

.object-coverを使用して、要素のコンテンツのサイズを変更し、コンテナをカバーします。

.object-cover

<div class="bg-gray-400">
  <img class="object-cover h-48 w-full ...">
</div>

Fill

.object-fillを使用して、要素のコンテンツをそのコンテナに合うように伸長します。

.object-fill

<div class="bg-gray-400">
  <img class="object-fill h-48 w-full ...">
</div>

None

.object-noneを使用して、コンテナサイズを無視して、要素のコンテンツを元のサイズで表示します。

.object-none

<div class="bg-gray-400">
  <img class="object-none h-48 w-full ...">
</div>

Scale Down

要素のコンテンツを元のサイズで表示しますが、必要に応じて.object-scale-downを使用して、コンテナに合わせて縮小します。

.object-scale-down

<div class="bg-gray-400">
  <img class="object-scale-down h-48 w-full ...">
</div>

レスポンシブ

置き換えられた要素のコンテンツを特定のブレークポイントでのみサイズ変更する方法を制御するには、既存のオブジェクトフィットユーティリティに{screen}:プレフィックスを追加します。 たとえば、md:object-scale-downクラスを要素に追加すると、中程度の画面サイズ以上でobject-scale-downユーティリティが適用されます。

Tailwindのレスポンシブデザイン機能の詳細については、Responsive Designのドキュメントをご覧ください。

<div class="bg-gray-400">
  <img class="object-contain sm:object-cover md:object-fill lg:object-none xl:object-scale-down ..." src="...">
</div>

カスタマイズ

レスポンシブと疑似バリアントクラス

デフォルトでonly responsive バリアントはobject-fit utilitiesのために作られます。

あなたはどのバリアントがobject-fit utilitiesのために作られるかを tailwind.config.jsファイル内のvariantsセクションのobjectFitプロパティを修正することによってコントロールできます。

例として、この設定は also hover and focus バリアントを作ります。

  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
-     objectFit: ['responsive'],
+     objectFit: ['responsive', 'hover', 'focus'],
    }
  }

無効にする

もしobject-fit utilitiesを使う予定がないなら、configファイルのcorePluginsセクションのobjectFit propertyfalseに設定することで完全に無効にすることができます。

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     objectFit: false,
    }
  }

Translated by T.Arai @ Entap,Inc. / スマホアプリ開発会社

Tailwind UI is now in early access!