在 Tailwind CSS 如果我們要設置一個固定比例的區塊，可以使用他們提供的 Aspect Ratio 的 class。
預設提供的有三種，不過其實第一種並沒有設定比例：
|
Class
|
Properties
|
|---|---|
| aspect-auto | aspect-ratio: auto; |
| aspect-square | aspect-ratio: 1 / 1; |
| aspect-video | aspect-ratio: 16 / 9; |
也就是設定 aspect-square 這個 class 就可以設置長寬比 1:1 的區塊，aspect-video 則是 16:9。
如果覺得這些比例不夠用，可以在 tailwind.config.js 增加比例：
module.exports = {
theme: {
extend: {
aspectRatio: {
'4/3': '4 / 3',
},
}
}}
要使用的話就是這樣設置對應的 class name：
<div class="aspect-[4/3]" ></div>這個 css 屬性一樣可以了解原本 aspect-ratio 的規則會更好。
![[CSS] 當畫面捲動到超過畫面時讓元素固定在頁面某處- position: sticky](/assets/upload/1580227388021_0.jpg)
![[Tailwind CSS] 使用 Aspect Ratio 設置固定比例區塊](/assets/upload/1611643654838_0.jpg)
