aspect-ratio

例

基本的な例

aspect-<ratio> ユーティリティ (aspect-3/2 など) を使用して、要素に特定のアスペクト比を与えます。

期待される動作を確認するために、例のサイズを変更してください

<img class="aspect-3/2 object-cover ..." src="/img/villas.jpg" />

ビデオのアスペクト比を使用する

aspect-video ユーティリティを使用して、ビデオ要素に 16:9 のアスペクト比を与えます。

<iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

カスタム値の使用

以下を使用します aspect-[<value>] 構文 を設定するにはアスペクト比完全にカスタムの値に基づいて

<img class="aspect-[calc(4*3+1)/3] ..." src="/img/villas.jpg" />

CSS 変数の場合は、以下も使用できます。 aspect-(<custom-property>) 構文

<img class="aspect-(--my-aspect-ratio) ..." src="/img/villas.jpg" />

これは、以下の省略形です。 aspect-[var(<custom-property>)] var() 関数を自動的に追加します。

レスポンシブデザイン

プレフィックスan aspect-ratio ユーティリティ md: のようなブレークポイントバリアントをプレフィックスとして付けて、ユーティリティを適用するのはmedium スクリーンサイズ以上の場合のみにします

<iframe class="aspect-video md:aspect-square ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

バリアントの使用方法の詳細については、バリアントのドキュメントを参照してください。

テーマのカスタマイズ

--aspect-* テーマ変数を使用して、以下をカスタマイズします。アスペクト比 プロジェクト内のユーティリティ

@theme {
  --aspect-retro: 4 / 3; 
}

これで aspect-retro ユーティリティをマークアップで使用できます

<iframe class="aspect-retro" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

テーマのカスタマイズの詳細については、 テーマのドキュメント.