tailwindcss aspect ratio

@tailwindcss/factive-ratio

提供可為元素提供固定縱橫比的可組合API的插件。

安裝

從NPM安裝插件：

npm install -D @tailwindcss/aspect-ratio

然後將插件添加到您的tailwind.config.js文件中，並禁用aspectRatio core插件，以避免與尾風CSS v3.0中包含的本機aspect-ratio實用程序發生衝突：

 // tailwind.config.js
module . exports = {
  theme : {
    // ...
  } ,
  corePlugins : {
    aspectRatio : false ,
  } ,
  plugins : [
    require ( '@tailwindcss/aspect-ratio' ) ,
    // ...
  ] ,
} 

用法

組合aspect-w-{n}和aspect-h-{n}類，以指定元素的長寬比：

 < div class =" aspect-w-16 aspect-h-9 " >
  < iframe src =" https://www.youtube.com/embed/dQw4w9WgXcQ " frameborder =" 0 " allow =" accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture " allowfullscreen > </ iframe >
</ div >

使用aspect-none刪除任何縱橫比行為：

 < div class =" aspect-w-16 aspect-h-9 lg:aspect-none " >
  <!-- ... -->
</ div >

刪除縱橫比行為時，如果嵌套元素具有w-{n}或h-{n}類，請確保它們在匹配的斷點前綴中重新定義：

 < div class =" aspect-w-16 aspect-h-9 lg:aspect-none " >
  < img src =" ... " alt =" ... " class =" w-full h-full object-center object-cover lg:w-full lg:h-full " />
</ div >

請注意，由於當前需要實現此方法（舊的填充底部技巧），您需要將縱橫比分配給父元素，並使您試圖大小的實際元素成為該父母的唯一孩子。

一旦在現代瀏覽器中支持aspect-ratio屬性，我們將為tailwind CSS本身添加官方支持並貶低該插件。

默認情況下生成了長達16個的長寬比類：

寬度	高度
aspect-w-1	aspect-h-1
aspect-w-2	aspect-h-2
aspect-w-3	aspect-h-3
aspect-w-4	aspect-h-4
aspect-w-5	aspect-h-5
aspect-w-6	aspect-h-6
aspect-w-7	aspect-h-7
aspect-w-8	aspect-h-8
aspect-w-9	aspect-h-9
aspect-w-10	aspect-h-10
aspect-w-11	aspect-h-11
aspect-w-12	aspect-h-12
aspect-w-13	aspect-h-13
aspect-w-14	aspect-h-14
aspect-w-15	aspect-h-15
aspect-w-16	aspect-h-16

配置

您可以在您的tailwind.config.js文件中的aspectRatio鍵下生成該插件的值和變體：

 // tailwind.config.js
module . exports = {
  theme : {
    aspectRatio : {
      1 : '1' ,
      2 : '2' ,
      3 : '3' ,
      4 : '4' ,
    }
  } ,
  variants : {
    aspectRatio : [ 'responsive' , 'hover' ]
  }
} 

與默認方面比例實用程序的兼容性

Tailwind CSS v3.0憑藉本機上的比例支持，儘管這些新的公用事業非常出色，但Safari 14中不支持該aspect-ratio屬性，該物業仍然具有大量的全球用法。如果您需要支持Safari 14，則此插件仍然是這樣做的最佳方法。

在技​​術上可以使用新的本機上利用aspect-ratio程序以及同一項目中的插件，但這確實沒有很多意義。如果您能夠使用新的本機上方比例實用程序，只需將它們代替此插件，因為它們要簡單得多，而且工作得更好。

但是，如果您確實想在項目中使用兩種方法，也許是一種從插件方法緩慢過渡到新的本機實用程序的一種方式，則需要將以下值添加到tailwind.config.js文件：

 module . exports = {
  // ...
  theme : {
    aspectRatio : {
      auto : 'auto' ,
      square : '1 / 1' ,
      video : '16 / 9' ,
      1 : '1' ,
      2 : '2' ,
      3 : '3' ,
      4 : '4' ,
      5 : '5' ,
      6 : '6' ,
      7 : '7' ,
      8 : '8' ,
      9 : '9' ,
      10 : '10' ,
      11 : '11' ,
      12 : '12' ,
      13 : '13' ,
      14 : '14' ,
      15 : '15' ,
      16 : '16' ,
    } ,
  } ,
}

這是必要的，因為默認的aspectRatio值被此插件值覆蓋。