Dans Tailwind, le rapport hauteur/largeur est la proportion entre la largeur et la hauteur d’un élément, comme une vidéo ou une image. Tailwind CSS a introduit la prise en charge native des utilitaires de rapport d'aspect, qui utilisent la propriété CSS aspect-ratio pour définir le rapport d'aspect souhaité pour un élément. Cependant, cette propriété n'est pas prise en charge dans les anciens navigateurs. Par conséquent, les utilisateurs peuvent utiliser le plugin de format d’image pour prendre en charge ces navigateurs. Ce plugin introduit deux classes, à savoir ' aspect-w-{n} ' et ' aspect-h-{n} », qui peuvent être combinés pour donner à un élément un rapport hauteur/largeur fixe.
Cet article expliquera la méthode pour définir le plugin de rapport hauteur/largeur dans Tailwind.
Comment définir le plugin de rapport d’aspect dans Tailwind CSS ?
Pour définir le plugin de rapport hauteur/largeur dans Tailwind, consultez les étapes ci-dessous :
- Installez le plugin de rapport hauteur/largeur dans le projet
- Ajoutez le plugin de rapport hauteur/largeur dans le fichier « tailwind.config.js » et désactivez le « aspect ' plugin de base
- Utilisez les classes du plug-in de rapport hauteur/largeur dans le programme HTML
- Vérifiez le résultat en affichant la page Web HTML
Étape 1 : Installer le plugin Aspect Ratio dans le projet Tailwind
Tout d’abord, ouvrez le terminal et exécutez la commande ci-dessous pour installer le plugin de rapport hauteur/largeur dans le projet :
asl et @ vent arrièrecss / ratio d'aspect
Étape 2 : configurer le plug-in de rapport d'aspect dans le fichier de configuration Tailwind
Ensuite, ouvrez le fichier « tailwind.config.js », ajoutez-y le plugin de rapport hauteur/largeur et désactivez le « aspect ' plugin principal pour éviter tout conflit :
module.exports = {contenu: [ './index.html' ] ,
CorePlugins : {
ratio d'aspect: FAUX ,
} ,
plugins : [
exiger ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;
Étape 3 : Utiliser le plugin Aspect Ratio dans le programme HTML
Maintenant, créez un programme HTML et utilisez le plugin de rapport hauteur/largeur. Par exemple, nous avons utilisé le ' aspect-w-16 ' et ' aspect-h-9 ' cours dans notre programme pour maintenir le rapport hauteur/largeur 16:9 :
< corps >< div classe = 'aspect-w-16 aspect-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
bordure de cadre = '0' permettre = 'accéléromètre ; lecture automatique ;
écriture dans le presse-papiers ; médias cryptés ; gyroscope;
image dans l'image' autoriser le plein écran > iframe >
div >
corps >
Ici:
- Le ' L'élément ' utilise deux classes de plug-in de rapport hauteur/largeur, c'est-à-dire ' aspect-w-16 ' et ' aspect-h-9 ». Ces classes sont utilisées pour créer un conteneur avec un rapport hauteur/largeur fixe de 16:9.
- Le '