【Tailwind和訳】LAYOUT/Object Fit

この記事について

この記事は、LAYOUT/Object Fitの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

オブジェクトのフィット

置き換えられた要素のコンテンツがどのようにリサイズされるかを制御するためのユーティリティです。

クラス	プロパティ
object-contain	object-fit: contain;
object-cover	object-fit: cover;
object-fill	object-fit: fill;
object-none	object-fit: none;
object-scale-down	object-fit: scale-down;

Contain

.object-containを使って、要素のコンテンツがコンテナ内に収まるようにサイズを変更します。

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

Cover

.object-coverを使って、コンテナを覆うように要素のコンテンツのサイズを変更する。

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

Fill

.object-fillを使って、要素のコンテンツをコンテナに合わせて伸ばす。

<div class="bg-light-blue-300 ...">
  <img class="object-fill h-48 w-full ..." />
</div>

None

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

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

Scale Down

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

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

レスポンシブ

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

<div>
  <img class="object-contain md:object-scale-down ..." src="..." />
</div>

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

カスタマイズ

バリアント

デフォルトでは、オブジェクトフィットユーティリティーに対しては、レスポンシブバリアントのみが生成されます。

tailwind.config.jsl ファイルのvariantsセクションにあるobjectFitプロパティを変更することで、オブジェクトフィットユーティリティのために生成されるバリアントをコントロールすることができます。

例えば、このコンフィグはホバーとフォーカスのバリアントも生成します。

tailwind.config.js

  module.exports = {
    variants: {
      extend: {
        // ...
+      objectFit: ['hover', 'focus'],
      }
    }
  }

無効化

オブジェクトフィットユーティリティーをプロジェクトで使用する予定がない場合は、設定ファイルのcorePluginsセクションでobjectFitプロパティをfalseに設定することで、完全に無効にすることができます。

tailwind.config.js

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