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

分享:

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

 

課程推薦

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。