[Tailwind CSS] 使用 Aspect Ratio 設置固定比例區塊

在 Tailwind CSS 如果我們要設置一個固定比例的區塊，可以使用他們提供的 Aspect Ratio 的 class。

預設提供的有三種，不過其實第一種並沒有設定比例：

也就是設定 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 的規則會更好。