tailwindcss aspect ratio

@ Tailwindcss / Aspect Ratio

Un plugin qui fournit une API composable pour donner aux éléments un rapport d'aspect fixe.

Installation

Installez le plugin à partir de NPM:

npm install -D @tailwindcss/aspect-ratio

Ensuite, ajoutez le plugin à votre fichier tailwind.config.js et désactivez le plugin de noyau aspectRatio pour éviter les conflits avec les utilitaires aspect-ratio natif inclus dans Tailwind CSS v3.0:

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

Usage

Combinez les classes aspect-w-{n} et aspect-h-{n} pour spécifier le rapport d'aspect pour un élément:

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

Utilisez aspect-none pour supprimer tout comportement du rapport d'aspect:

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

Lors de la suppression du comportement du rapport d'aspect, si les éléments imbriqués ont des classes w-{n} ou h-{n} , assurez-vous qu'ils sont redéclarés avec un préfixe de point d'arrêt correspondant:

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

Notez qu'en raison de la façon dont cela doit actuellement être mis en œuvre (l'ancienne astuce de padding-bas), vous devez attribuer le rapport d'aspect à un élément parent et faire de l'élément réel que vous essayez de dimensionner le seul enfant de ce parent.

Une fois que la propriété aspect-ratio est prise en charge dans les navigateurs modernes, nous ajouterons un support officiel au vent de queue CSS lui-même et déprécions ce plugin.

Les classes de ratio d'aspect jusqu'à 16 sont générées par défaut:

Largeur	Hauteur
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

Configuration

Vous pouvez configurer les valeurs et les variantes générées par ce plugin sous la touche aspectRatio dans votre fichier tailwind.config.js :

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

Compatibilité avec les utilitaires d'aspect par défaut

Tailwind CSS v3.0 expédié avec un support d'aspect natif, et bien que ces nouveaux utilitaires soient excellents, la propriété aspect-ratio n'est pas prise en charge dans Safari 14, qui a toujours une utilisation mondiale importante. Si vous devez prendre en charge Safari 14, ce plugin est toujours le meilleur moyen de le faire.

Bien qu'il soit techniquement possible d'utiliser les nouveaux utilitaires aspect-ratio natif ainsi que ce plugin dans le même projet, cela n'a pas vraiment de sens de le faire. Si vous pouvez utiliser les nouveaux utilitaires d'aspect natif, utilisez-les simplement à la place de ce plugin, car ils sont beaucoup plus simples et fonctionnent beaucoup mieux.

Cependant, si vous souhaitez utiliser les deux approches dans votre projet, peut-être comme un moyen de passer lentement de l'approche du plugin des nouveaux utilitaires natifs, vous devrez ajouter les valeurs suivantes à votre fichier 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' ,
    } ,
  } ,
}

Cela est nécessaire, car les valeurs aspectRatio par défaut sont écrasées par les valeurs de ce plugin.