レイアウト
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; |
例
カバーするようにリサイズ
要素のコンテンツをコンテナに合わせてカバーするようにリサイズするには、object-cover ユーティリティを使用します。
<img class="h-48 w-96 object-cover ..." src="/img/mountains.jpg" />コンテナ内に収める
要素のコンテンツをコンテナ内に収まるようにリサイズするには、object-contain ユーティリティを使用します。
<img class="h-48 w-96 object-contain ..." src="/img/mountains.jpg" />引き伸ばしてフィットさせる
要素のコンテンツをコンテナに合わせて引き伸ばすには、object-fill ユーティリティを使用します。
<img class="h-48 w-96 object-fill ..." src="/img/mountains.jpg" />縮小
要素のコンテンツを元のサイズで表示し、必要に応じてコンテナに合わせて縮小するには、object-scale-down ユーティリティを使用します。
<img class="h-48 w-96 object-scale-down ..." src="/img/mountains.jpg" />元のサイズを使用する
コンテナサイズを無視して、要素のコンテンツを元のサイズで表示するには、object-none ユーティリティを使用します。
<img class="h-48 w-96 object-none ..." src="/img/mountains.jpg" />レスポンシブデザイン
プレフィックス「 object-fit ユーティリティ を md: のようなブレークポイントバリアントとともに使用して、ユーティリティを適用する対象をmedium 画面サイズ以上
<img class="object-contain md:object-cover" src="/img/mountains.jpg" />バリアントの使用方法の詳細については、バリアントのドキュメントをご覧ください。