Hvordan indstiller man Aspect Ratio Plugin i Tailwind?

Hvordan Indstiller Man Aspect Ratio Plugin I Tailwind



I Tailwind er billedformatet forholdet mellem et elements bredde og højde, som en video eller et billede. Tailwind CSS introducerede indbygget understøttelse af billedformat-værktøjer, som bruger egenskaben CSS-formatforhold til at indstille det ønskede billedformat for et element. Denne egenskab understøttes dog ikke i ældre browsere. Derfor kan brugere bruge billedformat-plugin til at understøtte disse browsere. Dette plugin introducerer to klasser, dvs. aspekt-w-{n} ' og ' aspekt-h-{n} ”, som kan kombineres for at give et element et fast billedformat.

Denne artikel vil forklare metoden til at indstille billedformat-plugin'et i Tailwind.





Hvordan indstiller man Aspect Ratio Plugin i Tailwind CSS?

For at indstille billedformat-pluginnet i Tailwind, se nedenstående trin:



  • Installer billedformat-pluginnet i projektet
  • Tilføj billedformat-pluginnet i filen 'tailwind.config.js' og deaktiver ' aspekt ” kerne plugin
  • Brug formatforhold plugin-klasserne i HTML-programmet
  • Bekræft outputtet ved at se HTML-websiden

Trin 1: Installer Aspect Ratio Plugin i Tailwind Project



Åbn først terminalen og udfør nedenstående kommando for at installere billedformat-plugin i projektet:



asl og @ medvindcss / aspekt-forhold



Trin 2: Konfigurer Aspect Ratio Plugin i Tailwind Config File

Åbn derefter filen 'tailwind.config.js', tilføj billedformat-pluginnet i den, og deaktiver ' aspekt ” kerne plugin for at undgå eventuelle konflikter:

modul.eksport = {
indhold: [ './index.html' ] ,

corePlugins: {
billedformat: falsk ,
} ,

plugins: [
kræve ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;

Trin 3: Brug Aspect Ratio Plugin i HTML-programmet

Lav nu et HTML-program og brug billedformat-plugin'et i det. For eksempel har vi brugt  ' aspekt-w-16 ' og ' aspekt-h-9 ” klasser i vores program for at bevare billedformatet 16:9:

< legeme >
< div klasse = 'aspekt-w-16 aspekt-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
rammekant = '0' give lov til = 'accelerometer; autoplay;
udklipsholder-skriv; krypteret-medier; gyroskop;
billede-i-billede' tillad fuldskærm > iframe >
div >
legeme >

Her:

  • Det '
    ' element bruger to aspektforhold plugin klasser, dvs. ' aspekt-w-16 ' og ' aspekt-h-9 '. Disse klasser bruges til at skabe en container med et fast billedformat på 16:9.
  • Det '