在 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 的規則會更好。