I Tailwind är bildförhållandet proportionen mellan ett elements bredd och höjd, som en video eller en bild. Tailwind CSS introducerade inbyggt stöd för bildförhållandeverktyg, som använder egenskapen CSS bildförhållande för att ställa in önskat bildförhållande för ett element. Den här egenskapen stöds dock inte i äldre webbläsare. Därför kan användare använda insticksprogrammet bildförhållande för att stödja dessa webbläsare. Detta plugin introducerar två klasser, dvs. aspekt-w-{n} ' och ' aspekt-h-{n} ”, som kan kombineras för att ge ett element ett fast bildförhållande.
Den här artikeln kommer att förklara metoden för att ställa in plugin för bildförhållande i Tailwind.
Hur man ställer in Aspect Ratio Plugin i Tailwind CSS?
För att ställa in plugin för bildförhållande i Tailwind, titta på stegen nedan:
- Installera plugin-programmet för bildförhållande i projektet
- Lägg till plugin för bildförhållande i filen 'tailwind.config.js' och inaktivera ' aspekt ” kärnplugin
- Använd plugin-klasserna bildförhållande i HTML-programmet
- Verifiera resultatet genom att titta på HTML-webbsidan
Steg 1: Installera Aspect Ratio Plugin i Tailwind Project
Öppna först terminalen och utför det nedan angivna kommandot för att installera plugin för bildförhållande i projektet:
asl och @ medvindcss / bildförhållande
Steg 2: Konfigurera Aspect Ratio Plugin i Tailwind Config File
Öppna sedan filen 'tailwind.config.js', lägg till plugin-programmet för bildförhållande i den och inaktivera ' aspekt ” kärnplugin för att undvika konflikter:
module.exports = {innehåll: [ './index.html' ] ,
corePlugins: {
bildförhållande: falsk ,
} ,
plugins: [
behöva ( '@tailwindcss/aspect-ratio' ) ,
] ,
} ;
Steg 3: Använd Aspect Ratio Plugin i HTML-programmet
Skapa nu ett HTML-program och använd plugin för bildförhållande i det. Vi har till exempel använt ' aspekt-w-16 ' och ' aspekt-h-9 ” klasser i vårt program för att bibehålla bildförhållandet 16:9:
< kropp >< div klass = 'aspekt-w-16 aspekt-h-9' >
< iframe src = 'https://www.youtube.com/embed/NX_NW6bt6_s'
ramkant = '0' tillåta = 'accelerometer; automatisk uppspelning;
urklipp-skriva; krypterad media; gyroskop;
bild-i-bild' tillåt helskärm > iframe >
div >
kropp >
Här:
- den ' '-element använder två plugin-klasser för bildförhållande, dvs. ' aspekt-w-16 ' och ' aspekt-h-9 ”. Dessa klasser används för att skapa en behållare med ett fast bildförhållande på 16:9.
- den '