În Tailwind, raportul de aspect este proporția dintre lățimea și înălțimea unui element, cum ar fi un videoclip sau o imagine. Tailwind CSS a introdus suport nativ pentru utilitare de raport de aspect, care utilizează proprietatea de raport de aspect CSS pentru a seta raportul de aspect dorit pentru un element. Cu toate acestea, această proprietate nu este acceptată în browserele mai vechi. Prin urmare, utilizatorii pot folosi pluginul pentru raportul de aspect pentru a accepta aceste browsere. Acest plugin introduce două clase și anume „ aspect-w-{n} ' și ' aspect-h-{n} ”, care poate fi combinat pentru a da unui element un raport de aspect fix.
Acest articol va explica metoda de setare a pluginului pentru raportul de aspect în Tailwind.
Cum să setați pluginul pentru raportul de aspect în Tailwind CSS?
Pentru a seta pluginul pentru raportul de aspect în Tailwind, uitați-vă la pașii furnizați mai jos:
- Instalați pluginul pentru raportul de aspect în proiect
- Adăugați pluginul pentru raportul de aspect în fișierul „tailwind.config.js” și dezactivați „ aspect ” plugin de bază
- Utilizați clasele de plugin pentru raportul de aspect din programul HTML
- Verificați rezultatul vizualizând pagina web HTML
Pasul 1: Instalați pluginul Aspect Ratio în Tailwind Project
Mai întâi, deschideți terminalul și executați comanda menționată mai jos pentru a instala pluginul pentru raportul de aspect în proiect:
asl si @ vânt din spatecss / raportul de aspect
Pasul 2: Configurați pluginul Aspect Ratio în fișierul de configurare Tailwind
Apoi, deschideți fișierul „tailwind.config.js”, adăugați pluginul pentru raportul de aspect și dezactivați „ aspect ” plugin de bază pentru a evita orice conflicte:
module.exports = {conţinut: [ „./index.html” ] ,
CorePlugins: {
raport de aspect: fals ,
} ,
pluginuri: [
cere ( „@tailwindcss/aspect-ratio” ) ,
] ,
} ;
Pasul 3: Utilizați pluginul Aspect Ratio în programul HTML
Acum, creați un program HTML și utilizați pluginul pentru raportul de aspect din acesta. De exemplu, am folosit „ aspect-w-16 ' și ' aspect-h-9 ” clase din programul nostru pentru a menține raportul de aspect 16:9:
< corp >< div clasă = „aspect-w-16 aspect-h-9” >
< iframe src = „https://www.youtube.com/embed/NX_NW6bt6_s”
chenarul cadru = '0' permite = „accelerometru; redare automată;
clipboard-scriere; media criptată; giroscop;
imagine în imagine' ecran complet permis > iframe >
div >
corp >
Aici:
- „ „elementul folosește două clase de plugin pentru raportul de aspect, adică „ aspect-w-16 ' și ' aspect-h-9 ”. Aceste clase sunt utilizate pentru a crea un container cu un raport de aspect fix de 16:9.
- „