tailwindcss aspect ratio下载 - tailwindcss aspect ratio源代码下载

tailwindcss aspect ratio

其他源码

v0.4.2

下载

@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 >

Use aspect-none to remove any aspect ratio behavior:

 < 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程序以及同一项目中的插件，但这确实没有很多意义。如果您能够使用新的本机上方比例实用程序，只需将它们代替此插件，因为它们要简单得多，而且工作得更好。

However, if you do want to use both approaches in your project, maybe as a way of transitioning slowly from the plugin approach to the new native utilities, you'll need to add the following values to your tailwind.config.js file:

 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' ,
    } ,
  } ,
}