- Layout
- aspect-ratio
Layout
aspect-ratio
用於控制元素長寬比的通用類別。
| Class | Styles |
|---|---|
aspect-<ratio> | aspect-ratio: <ratio>; |
aspect-square | aspect-ratio: 1 / 1; |
aspect-video | aspect-ratio: var(--aspect-video); /* 16 / 9 */ |
aspect-auto | aspect-ratio: auto; |
aspect-(<custom-property>) | aspect-ratio: var(<custom-property>); |
aspect-[<value>] | aspect-ratio: <value>; |
範例（Examples）
基本範例（Basic example）
使用 aspect-<ratio> 通用類別（如 aspect-3/2）來為元素指定特定的長寬比：
調整範例大小以查看預期行為
<img class="aspect-3/2 object-cover ..." src="/img/villas.jpg" />使用影片長寬比（Using a video aspect ratio）
使用 aspect-video 通用類別來為影片元素設定 16 / 9 的長寬比：
調整範例大小以查看預期行為
<iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>使用自訂值（Using a custom value）
使用 aspect-[<value>] 語法，根據完全自訂的值來設定 aspect ratio：
<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() 函式。
響應式設計（Responsive design）
在 aspect-ratio 通用類別前面加上像 md: 這樣的中斷點變體，讓該通用類別只在中型螢幕尺寸及以上時套用：
<iframe class="aspect-video md:aspect-square ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>在變體文件中了解更多關於使用變體的資訊。
自訂主題（Customizing your theme）
使用 --aspect-* 主題變數來自訂專案中的 aspect ratio 通用類別：
@theme { --aspect-retro: 4 / 3; }現在可以在標記中使用 aspect-retro 通用類別：
<iframe class="aspect-retro" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>在主題文件中了解更多關於自訂主題的資訊。