版面配置
aspect-ratio
用於控制元素長寬比的工具。
| 類別 | 樣式 |
|---|---|
aspect-<ratio> | aspect-ratio: <ratio>; |
aspect-square | aspect-ratio: 1 / 1; |
aspect-video | aspect-ratio: var(--aspect-ratio-video); /* 16 / 9 */ |
aspect-auto | aspect-ratio: auto; |
aspect-(<custom-property>) | aspect-ratio: var(<custom-property>); |
aspect-[<value>] | aspect-ratio: <value>; |
範例
基本範例
使用 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() 函式。
響應式設計
前綴詞一個 aspect-ratio 實用類別 加上一個斷點變體，例如 md:，僅在中中等 螢幕尺寸及以上應用該實用類別
<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>深入了解如何在 佈景主題文件中.
